如何为react-data-grid选中行的不同单元格设置差异化样式？

针对react-data-grid v7.0.0-beta.28的这个样式问题，有两种简单可行的方案：

方案一：利用CSS优先级覆盖（推荐） #

react-data-grid的选中行默认会添加rdg-row-selected类，你可以通过后代选择器提升样式优先级，覆盖Numbers列的默认灰色背景：

1. 保留你原本给Numbers列设置的cellClass（比如叫numbers-cell）：

const columns = [
  // 其他列配置
  {
    key: 'numbers',
    name: 'Numbers',
    editable: false,
    cellClass: 'numbers-cell'
  }
];

2. 在CSS中添加选中状态的样式：

/* 默认不可编辑状态的灰色背景 */
.numbers-cell {
  background-color: #e5e5e5;
}

/* 选中行内Numbers列的背景色，优先级更高 */
.rdg-row-selected .numbers-cell {
  background-color: #f0d8d8; /* 替换成你需要的颜色 */
}

这种方法不需要修改组件逻辑，纯CSS就能解决，是最简洁的方案。

方案二：自定义单元格Formatter动态控制样式 #

如果需要更灵活的逻辑（比如根据行数据动态调整颜色），可以通过自定义Formatter组件，利用props中的rowSelected状态动态切换类名：

const columns = [
  // 其他列配置
  {
    key: 'numbers',
    name: 'Numbers',
    editable: false,
    formatter: ({ value, cellProps: { rowSelected } }) => {
      const cellClass = `numbers-cell ${rowSelected ? 'numbers-cell-selected' : ''}`;
      return <div className={cellClass}>{value}</div>;
    }
  }
];

对应的CSS：

.numbers-cell {
  background-color: #e5e5e5;
}

.numbers-cell-selected {
  background-color: #f0d8d8;
}

为什么之前的方法没生效？ #

你之前用的静态cellClass只会渲染固定类名，不会随行选中状态变化；而RowRenderer如果没有正确传递选中状态到单元格，也无法单独修改某列样式。上面的两种方法都是直接利用表格自带的选中行类或单元格props中的选中状态，精准控制样式。

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