如何全局配置VaadinGrid启用GridVariant.LUMO_ROW_STRIPES？

可以通过以下几种方式实现，无需在每个Grid实例中重复添加主题变体：

方法1：自定义Grid基类 #

创建一个通用的Grid子类，在构造函数中统一添加主题变体，项目中所有Grid都使用这个子类：

public class StripedGrid<T> extends Grid<T> {
    public StripedGrid() {
        super();
        addThemeVariants(GridVariant.LUMO_ROW_STRIPES);
    }

    // 重载常用构造函数以适配不同场景
    public StripedGrid(Class<T> beanType) {
        super(beanType);
        addThemeVariants(GridVariant.LUMO_ROW_STRIPES);
    }

    public StripedGrid(Class<T> beanType, boolean autoCreateColumns) {
        super(beanType, autoCreateColumns);
        addThemeVariants(GridVariant.LUMO_ROW_STRIPES);
    }
}

之后在代码中用StripedGrid替代原生Grid即可，比如：

StripedGrid<User> userGrid = new StripedGrid<>(User.class);

方法2：全局CSS强制启用行条纹 #

直接在应用的全局样式文件（如frontend/styles/styles.css）中添加CSS规则，模拟LUMO_ROW_STRIPES的效果：

vaadin-grid {
    --lumo-row-stripes: var(--lumo-shade-5pct);
    background-image: linear-gradient(var(--lumo-row-stripes) 50%, transparent 50%);
    background-size: 100% calc(var(--lumo-line-height-m) * var(--lumo-font-size-m) + var(--lumo-space-s) * 2);
}

这种方式不需要修改Java代码，直接通过CSS覆盖默认样式，完全全局生效。

方法3：自定义Vaadin主题（进阶） #

如果使用自定义主题继承LUMO，可以在主题的组件样式文件中修改Grid的默认配置：

1. 在自定义主题的components目录下创建vaadin-grid.css文件
2. 添加以下内容：

:host {
    --lumo-row-stripes: var(--lumo-shade-5pct);
}

:host::before {
    background-image: linear-gradient(var(--lumo-row-stripes) 50%, transparent 50%);
    background-size: 100% calc(var(--lumo-line-height-m) * var(--lumo-font-size-m) + var(--lumo-space-s) * 2);
}

这种方式符合Vaadin主题定制的规范，适合需要深度自定义主题的场景。

关于@Theme注解未生效的说明 #

@Theme注解的作用是指定应用使用的整体主题（如Lumo或Material），并不能直接为单个组件添加主题变体，所以之前的尝试不会生效。

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