Vaadin 14：如何为指定Grid设置自定义单元格样式？

针对你遇到的仅当前视图Grid生效样式的问题，有两种可靠的解决方式：

方式一：使用类名 + 样式穿透（推荐） #

这种方式无需修改全局主题，仅作用于当前视图内的目标Grid：

1. 给目标Grid添加自定义类名
   在视图的Java代码中，为Grid添加普通CSS类名（注意不是themeName）：

grid.addClassName("custom-grid");

2. 编写视图局部样式
   在当前视图对应的CSS文件（比如MyView.css）中，使用::v-deep穿透Shadow DOM，结合类名限定样式范围：

::v-deep .custom-grid [part~="cell"] ::slotted(vaadin-grid-cell-content) {
    padding: var(--lumo-space-xl);
}

3. 引入样式文件
   在视图类上通过@CssImport引入该样式，无需指定themeFor：

@CssImport(value = "./styles/MyView.css")
public class MyView extends VerticalLayout {
    // ... 视图代码
}

方式二：使用自定义themeName（需全局主题文件） #

如果偏好使用Vaadin的theme机制，可调整如下：

1. 添加themeName到Grid
   使用addThemeName而非直接设置theme属性，避免覆盖已有的GridVariant：

grid.addThemeName("custom-grid-theme");

2. 编写主题样式
   在通过themeFor="vaadin-grid"引入的CSS文件中，修改样式选择器为：

:host([theme~="custom-grid-theme"]) [part~="cell"] ::slotted(vaadin-grid-cell-content) {
    padding: var(--lumo-space-xl);
}

这种方式下，只有添加了custom-grid-theme的Grid会应用该样式，但要注意如果其他视图的Grid也添加了这个themeName，同样会生效。

为什么之前的尝试无效？ #

• 直接使用setAttribute("theme", "custom-grid-theme")会覆盖Grid原有的theme属性值，导致已应用的GridVariant丢失，正确的做法是用addThemeName追加主题标识。
• 不使用themeFor且未加::v-deep时，视图的局部样式无法穿透到Grid的Shadow DOM内部，因此无法生效。

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