如何为react-data-table-component的行设置动态背景色？

你的问题出在两处：

• 使用customStyles时，未将其传递给DataTable组件
• conditionalStyles的style属性里错误嵌套了函数，导致无法正确读取行的color值

以下是两种可行的正确实现方式：

方法一：使用customStyles #

通过customStyles的rows.style回调函数，根据每行的color属性设置背景色，注意要把customStyles传给DataTable组件：

const data = [
    { id: 1, title: 'some title', color: 'red' },
    { id: 2, title: 'some title 2', color: 'green' },
];

const columns = [
    { name: 'Title', selector: (row) => row.title },
];

const customStyles = {
    rows: {
        style: (row) => ({
            backgroundColor: row.color || 'transparent', // 兜底默认背景色
        }),
    },
};

<DataTable columns={columns} data={data} customStyles={customStyles} />

方法二：使用conditionalStyles #

修正style的写法，直接返回样式对象，不要嵌套额外函数：

const data = [
    { id: 1, title: 'some title', color: 'red' },
    { id: 2, title: 'some title 2', color: 'green' },
];

const columns = [
    { name: 'Title', selector: (row) => row.title },
];

const conditionalStyles = [
    {
        when: (row) => !!row.color, // 判断行是否存在color属性
        style: (row) => ({
            backgroundColor: row.color,
        }),
    },
];

<DataTable columns={columns} data={data} conditionalStyles={conditionalStyles} />

关键说明： #

• customStyles的rows.style是接收当前行和行索引的回调，返回行样式对象，适合全局统一处理行样式
• conditionalStyles需要是样式规则数组，每个规则的style回调直接返回样式对象，嵌套函数会导致无法正确解析行数据

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