如何不使用className generator设置Grid单元格/行的背景样式

以下实现无需预定义任何CSS类，直接通过操作单元格/行根元素的内联样式设置背景，完全支持用户自定义样式规则的场景：

单元格级别背景设置 #

后端Java（Vaadin 场景） #

自定义列的ComponentRenderer时可以直接获取当前单元格的根元素：

grid.addColumn(/* 你的列值逻辑 */).setRenderer(new ComponentRenderer<>((item, context) -> {
    // 这里返回你自定义的渲染组件，比如带图标的标签、复选框等
    Component customRenderComponent = buildYourCustomComponent(item);
    // 获取当前单元格的根DOM元素
    Element cellRoot = context.getElement().getParent();
    // 直接设置内联背景样式，颜色值可以从用户自定义配置、单元格渲染器脚本中动态获取
    cellRoot.getStyle().set("background", getUserCustomBgColor(item));
    return customRenderComponent;
}));

前端框架场景（React/Vue等） #

在单元格渲染函数中通过ref向上查找单元格根节点：

// React 示例
const column = {
  key: "customCol",
  render: (text, record) => {
    const innerRef = useRef(null);
    // 组件挂载/背景配置更新时设置单元格样式
    useEffect(() => {
      if (!innerRef.current) return;
      // 根据表格DOM结构找到td根节点，层级可根据实际组件调整
      const cellRoot = innerRef.current.closest("td");
      cellRoot.style.background = record.userCustomBg;
    }, [record.userCustomBg]);
    // 你的自定义渲染内容
    return <div ref={innerRef}>{/* 图标、标签、复选框等内容 */}</div>;
  }
}

行级别背景设置 #

如果需要整行设置背景，直接操作行根元素即可：

Java 示例 #

grid.addAttachListener(e -> {
    // 监听数据更新事件，重渲染行时重新设置样式
    grid.getDataProvider().addDataProviderListener(event -> {
        grid.getGenericDataView().getItems().forEach(item -> {
            // 获取对应行的元素
            Element rowElement = grid.getRowElement(item);
            rowElement.getStyle().set("background", getUserCustomRowBg(item));
        });
    });
});

前端示例（以Ant Design Table为例） #

<Table
  dataSource={data}
  columns={columns}
  // 直接为每一行设置内联样式
  onRow={(record) => ({
    style: {
      background: record.userCustomRowBg
    }
  })}
/>

注意事项 #

• 表格滚动、排序、筛选触发重渲染时，会重置单元格/行的默认样式，需要在对应的更新监听事件中重新执行样式设置逻辑
• 如果和表格自带的选中态、隔行变色等默认样式冲突，可以在样式值后加!important提升优先级，比如cellRoot.getStyle().set("background", "#f00 !important")

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