Vaadin 自定义菜单栏 css

如何解决Vaadin 自定义菜单栏 css

如文档所述，我将我的主题添加为 jar。

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

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

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

所有样式都已加载，很好:) 然后我在 base.css 中添加 shadow-tree 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

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

解决方法

所以在使用 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”的菜单栏