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

Question

我正在尝试弄清楚如何使用 @CssImport 不对一个元素的所有元素应用一揽子样式。我搜索了 Vaadin 文档但无济于事。

目前我正在渲染 MainMenuBar 组件和它下面的 SecondaryMenuBar 组件。我希望每个菜单栏都有自己的风格。在 Vaadin 14 中，我无法将 class 直接附加到 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");

此主题属性值也传播到 sub-components。这使得例如可以在不对所有可能的 TextFields 进行样式设置的情况下对 ComboBox 或 DatePicker 的 TextField 进行样式设置。

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

Vaadin 14 add different styles to elements of the same type?

java

vaadin

shadow-dom