React Table 选中行状态切换时背景色未同步更新如何解决

问题根因及修复方案如下： #

• 样式合并方式错误
  你当前直接在{...row.getRowProps()}后自定义style属性，会完全覆盖getRowProps返回的内置样式配置，同时React Table的状态更新不会触发外层style的重渲染。需要把自定义样式作为参数传入getRowProps方法中合并：

<Tr
  {...row.getRowProps({
    style: {
      backgroundColor: row.isSelected ? "#E9D8FD" : "transparent",
    },
  })}
/>

• 背景色属性值不合法
  backgroundColor没有none这个合法取值，部分浏览器会忽略该赋值，导致取消选中时样式不生效，替换为transparent即可。
• 缺少唯一行标识配置
  如果未给表格配置唯一行ID，React更新时可能复用行组件实例导致样式未同步。需要在初始化表格实例时添加getRowId配置：

const table = useTable(
  {
    columns,
    data,
    // 替换为你行数据中的唯一字段
    getRowId: originalRow => originalRow.id
  },
  useRowSelect
)

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