如何在 Vaadin 24 中设置 vaadin 对话框的样式？

Question

我已将我的 Polymer 3 Javascript 应用程序从 Vaadin 14 组件升级到 Vaadin 24 组件。我用来设置 vaadin-dialog-overlay 样式的自定义主题样式不适用于 v24，新的 v24 CSS 选择器也不适合我。

这是使用 v14 组件的示例：

:host([theme="initialization"]) [part="content"] {
  min-width: 30em;
  padding: 24px;
  align-items: center;
}

使用 v24，我尝试了以下两个样式选择器但没有成功：

vaadin-dialog-overlay::part(content)
vaadin-dialog-overlay::part(overlay)

我试过将它们放在自定义主题中、托管 vaadin-dialog 的组件中、frontend/themes/my-theme/styles.css 和 frontend/themes/my-theme/components/vaadin-dialog-overlay .css.

这是我需要使用“左”主题开始工作的另一个示例：

vaadin-dialog-overlay::part(overlay) {
  width: 45em;
  position: absolute;
  top: 0;
  left: 0;
}

在 Chrome Inspector Styles 部分，我可以手动输入我想要的覆盖部分属性，它们会按预期应用，但在我的代码中，我什么都做不了。

如何让 vaadin-dialog 部分的样式在 v24 组件中工作？

Answer 1

将您发布的 CSS 片段放在主题的

styles.css

.

中对我来说确实很好用

它针对 all 对话框，当然，不仅仅是那些具有“左”主题的对话框，所以如果你只想针对那些，你可以将该选择器写为

vaadin-dialog-overlay[theme="left"]::part(overlay)

，或者只是应用一个类名（不需要为主题属性）并使用

vaadin-dialog-overlay.left::part(overlay)

内容部分，选择器应该是

vaadin-dialog-overlay[theme="initialization"]::part(content)

（顺便说一句，V14 风格的 Shadow DOM CSS 在 V24 中仍然有效，所以你应该可以按原样使用它）

其他 CSS 对你有用吗？如果没有，请检查您是否真的将主题应用到带有

@Theme

注释的 UI。