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

Question

我试图找出如何不为所有使用@CssImport的元素应用毯子样式。我搜索了Vaadin的文档，但没有结果。

目前，我正在呈现一个MainMenuBar组件，在它下面呈现一个SecondaryMenuBar组件。我希望每个菜单栏都有自己的风格。在Vaadin 14中，我无法将类直接附加到MenuItems上，因此我必须使用@CssImport注释来锁定阴影区域中的菜单栏按钮，如下所示：

@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设置样式。