问题描述
现在我想为用户菜单添加一个带有单个条目的菜单栏。 但是我在创建自定义 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”的菜单栏