Vaadin 14/Flow中如何为Grid组件编程式设置自定义样式？

• 运行时动态注入自定义CSS规则，可直接替换Vaadin 8中的Page.getCurrent().getStyles().add()逻辑，推荐使用JS注入的方式兼容性更强：

// cssName为你自定义的类名，userSelectedColor为用户选择的颜色值（如#ff0000、rgb(255,0,0)）
String customCss = ".MyCustomTheme [part~='cell']." + cssName + " { background-color: " + userSelectedColor + "; }";
UI.getCurrent().getPage().executeJs(
    "const style = document.createElement('style');" +
    "style.textContent = $0;" +
    "document.head.appendChild(style);",
    customCss
);

• 适配Grid的Shadow DOM选择规则：Vaadin 14的Grid使用Shadow DOM渲染内部结构，原Vaadin 8的.v-grid-cell选择器不再生效，需要用[part~="cell"]匹配单元格节点。同时需要给你的Grid实例添加自定义主题类名，保证CSS选择器可以命中目标元素：

grid.addClassName("MyCustomTheme");

• 你现有配置的列类名生成器逻辑无需修改：addColumn(myColumn).setClassNameGenerator(cssName);会自动将自定义类名附加到对应单元格的class属性中，和注入的CSS规则匹配后即可生效。
• 之前的grid.getElement().getStyle().set()方案无效的原因：该方法是给Grid根元素设置内联样式，作用范围仅限整个表格，无法通过类名选择器匹配到内部的单元格节点。

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