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

Question

我正在尝试找出如何不使用@CssImport 为所有一个元素应用毯子样式。我搜索了 Vaadin 文档，但无济于事。

目前我正在渲染一个 MainMenuBar 组件和它下面的 SecondaryMenuBar 组件。我希望每个菜单栏都有自己的风格。在 Vaadin 14 中，我无法将类直接附加到 MenuItems，因此我必须使用 @CssImport 注释来定位 shadow 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代码中你需要为组件本身设置主题属性的值。

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

这个主题属性值也会传播到子组件。例如，这使得在不对所有可能的 TextField 设置样式的情况下设置 ComboBox 或 DatePicker 的 TextField 样式成为可能。