Vaadin自定义菜单栏css

Question

我按照文档中的描述将主题添加为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

也许我确实理解了一些错误。任何帮助都会很好：(

Answer 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"的菜单栏