Vaadin 24自定义CSS样式不生效问题求助

问题描述 #

我在路径my-project/frontend/themes/my-project/styles.css的styles.css文件中添加了两段自定义CSS：

// 为按钮添加边框
vaadin-button:not([disabled]):not([theme~="primary"]):not([theme~="tertiary"]) {
  border: 1px solid #d8d8d8;
}

// 设置网格单元格内容顶部对齐
vaadin-grid::part(body-cell) {
    align-items: self-start;
    vertical-align: top;
}

但这两个样式均未生效，不过html{}中定义的Lumo主题变量已正常生效：

html {
    --lumo-primary-color-10pct: hsla(202, 100%, 26%, 0.1);
    --lumo-primary-color-50pct: hsla(202, 100%, 26%, 0.5);
    --lumo-primary-color: hsl(202, 100%, 26%);

    --lumo-error-color-10pct: hsla(3, 77%, 55%, 0.1);
    --lumo-error-color-50pct: hsla(3, 77%, 55%, 0.5);
    --lumo-error-color: hsl(3, 77%, 55%);

    --lumo-success-color-10pct: hsla(145, 81%, 37%, 0.12);
    --lumo-success-color-50pct: hsla(145, 81%, 37%, 0.55);
    --lumo-success-color: hsl(145, 81%, 37%);

    --lumo-primary-text-color-10pct: hsla(202, 100%, 26%, 0.1);
    --lumo-primary-text-color-50pct: hsla(202, 100%, 26%, 0.5);
    --lumo-primary-text-color: hsl(202, 100%, 26%);

    --lumo-error-text-color-10pct: hsla(3, 77%, 55%, 0.1);
    --lumo-error-text-color-50pct: hsla(3, 77%, 55%, 0.5);
    --lumo-error-text-color: hsl(3, 77%, 55%);

    --lumo-success-text-color-10pct: hsla(145, 81%, 37%, 0.12);
    --lumo-success-text-color-50pct: hsla(145, 81%, 37%, 0.55);
    --lumo-success-text-color: hsl(145, 81%, 37%);
    
    --lumo-size-xl: 3rem;
    --lumo-size-l: 2.5rem;
    --lumo-size-m: 2rem;
    --lumo-size-s: 1.75rem;
    --lumo-size-xs: 1.5rem;
    --lumo-space-xl: 1.875rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.625rem;
    --lumo-space-s: 0.3125rem;
    --lumo-space-xs: 0.1875rem;

}

同时已在Spring Boot应用类上添加了正确的@Theme注解：

@SpringBootApplication
@Theme(value = "my-project")
public class Application implements AppShellConfigurator {
   ...
}

请问我遗漏了什么配置？

可能的原因及解决方法 #

1. 样式优先级不足 #

Vaadin组件内置样式优先级可能高于自定义样式，需提升选择器权重：

• 按钮样式可调整为：

:host vaadin-button:not([disabled]):not([theme~="primary"]):not([theme~="tertiary"]) {
  border: 1px solid #d8d8d8;
}

若仍不生效，可临时使用!important（优先尝试提升权重而非直接依赖该属性）：

vaadin-button:not([disabled]):not([theme~="primary"]):not([theme~="tertiary"]) {
  border: 1px solid #d8d8d8 !important;
}

• 网格单元格样式调整：

vaadin-grid::part(body-cell) {
    align-items: self-start !important;
    vertical-align: top !important;
}

2. 未导入基础主题样式 #

确保styles.css顶部导入Lumo主题基础样式，否则自定义组件样式无法覆盖默认样式：

@import '@vaadin/vaadin-lumo-styles/all-imports';

3. 缓存问题 #

浏览器或Vaadin开发服务器可能缓存旧样式：

• 强制刷新浏览器（Ctrl+F5）
• 重启Spring Boot应用
• 清除Vaadin缓存目录（通常为target/vaadin-dev-mode-cache）

4. 组件主题属性未覆盖 #

检查按钮是否使用了未排除的主题属性（如theme="secondary"），调整选择器：

vaadin-button:not([disabled]):not([theme~="primary"]):not([theme~="tertiary"]):not([theme~="secondary"]) {
  border: 1px solid #d8d8d8;
}

内容的提问来源于stack exchange，提问作者clickguy