Vaadin 自定义菜单栏 css答案

【问题标题】：Vaadin customize menu-bar cssVaadin 自定义菜单栏 css
【发布时间】：2021-07-05 14:03:11
【问题描述】：

我按照文档的描述将我的主题添加为 jar。

现在我想为用户菜单添加一个带有单个条目的菜单栏。但是我在创建自定义 css 时遇到了一些麻烦。

在主题中我导入了我的 base.css

@import url('./base.css');
@import url('lumo-css-framework/all-classes.css');

所有样式都已加载，很好:) 然后我在我的 base.css 中添加影子树 css

/* working */
vaadin-menu-bar{
  border-radius: 0px;
  background: aqua;
}

/* not working */
vaadin-menu-bar-button{
  border-radius: 0px;
  background: red;
}

/* not working */
vaadin-menu-bar [part="menu-bar-button"]{
  background: yellow;
}

https://vaadin.com/docs/v14/flow/styling/styling-components

可能是我理解错了。任何帮助都会很棒:)

【问题讨论】：

如果你使用IE9，你不能对未知元素进行风格化。如果您使用 Chrome 或 Firefox 或 Safari 或 IE>9，它应该可以工作。如果您想对它们进行风格化，请添加使用document.createElement 的脚本来创建所有这些。请参阅diveintohtml5.info/semantics.html#unknown-elements 了解更多信息。
使用 firefox 89.0.2 (64-bit) 但它不工作:(
如果你想为一个组件设置样式，你必须使用 CssImport 和 themeFor 导入样式。请结帐vaadin.com/docs/v14/flow/styling/importing-style-sheets

标签： css vaadin styled-components

【解决方案1】：

所以在使用 JAR 作为主题时，css 属于

resource/META-INF/resources/themes/mytheme/base.css

我可以使用

vaadin-menu-bar.usermenu::part(menu-bar-button){
  border-radius: var(--lumo-border-radius-m);
}

使用类名“usermenu”将我的自定义样式设置为菜单栏

【讨论】：