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