css Vaadin 24覆盖导航栏的样式

yqhsw0fo 于 2023-03-25 发布在其他

关注(0)|答案(1)|浏览(170)

Vaadin 24版本对navbar有以下样式：

[part="navbar"] {
  min-height: var(--lumo-size-xl);
  border-bottom: 1px solid var(--lumo-contrast-10pct);
}

我想删除以下行：

min-height: var(--lumo-size-xl);

为此，我创建了vaadin-app-layout.css文件并将其放置到mytheme\components文件夹中：

[part~="navbar"] {
  border-bottom: 1px solid var(--lumo-contrast-10pct);
}

但它没有任何效果，我做错了什么，如何正确地覆盖这个样式？

已更新

mytheme\components\vaadin-app-layout.css

[part="navbar"] {
  border-bottom: 1px solid var(--lumo-contrast-10pct);
  min-height: unset;
}

但它不起作用
然后我添加到styles.css：

vaadin-app-layout::part(navbar) {
  border-bottom: 1px solid var(--lumo-contrast-10pct);
  min-height: unset;
}

它能用，为什么它不能用在vaadin-app-layout.css上

1条答案

我认为，从Vaadin 24开始，您必须将用于自定义Vaadin组件的CSS放入主题目录中的component-styles目录（不再只是components）。