java - Vaadin 14 为同一类型的元素添加不同的样式？

Question

我正在尝试弄清楚如何不使用 @CssImport 对一个元素的所有元素应用毯子样式。我搜索了 Vaadin 文档，但没有结果。

目前，我正在渲染 MainMenuBar 组件和其下方的 secondaryMenuBar 组件。我希望每个菜单栏都有自己的风格。在 Vaadin 14 中，我无法将类直接附加到 MenuItems，因此我必须使用 @CssImport 注释来定位阴影 dom 中的菜单栏按钮，如下所示:

@CssImport(value="styles/main-menu-bar.css", themeFor="vaadin-menu-bar-button")

由于我想为SecondaryMenuBar 做完全相同的事情，所以我添加了相同的themeFor:

@CssImport(value="styles/secondary-menu-bar.css", themeFor="vaadin-menu-bar-button")

正如您可以想象的，这会导致两个菜单栏具有相同的样式。

我不知道如何在不设置所有按钮样式的情况下定位菜单栏按钮。

如有任何帮助，我们将不胜感激。

Answer 1

执行此操作的首选方法是利用主题属性。它允许您在 CSS 规则中添加额外的选择器，如下所示

:host([theme~="secondary-menu"]) ... {
    ...
}

在 Java 代码中，您需要为组件本身设置 theme 属性的值。

menuBar.getElement().setAttribute("theme", "secondary-menu");

此主题属性值也会传播到子组件。例如，这使得可以对 ComboBox 或 DatePicker 的 TextField 进行样式设置，而无需对所有可能的 TextField 进行样式设置。