时间戳

首页 > 解决方案 > Vaadin 自定义菜单栏 css

css - Vaadin 自定义菜单栏 css

问题描述

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

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

标签： cssvaadinstyled-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”将我的自定义样式设置为菜单栏

推荐阅读