如何有条件地更改数据网格行背景颜色？

Question

取决于源（记录）字段值（例如状态列为“活动”）我想使行背景在 Datagrid 中具有特定颜色。我怎么做？感谢您提供任何示例代码来做到这一点！

Answer 1

<tr>您可以根据记录自定义数据网格行样式（应用于元素） rowStyle，这要归功于需要一个函数的 prop。

例如，如果记录的一个值（例如其视图数）超过特定阈值，则允许将自定义背景应用于整行。

const postRowStyle = (record, index) => ({
    backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
});
export const PostList = (props) => (
    <List {...props}>
        <Datagrid rowStyle={postRowStyle}>
            ...
        </Datagrid>
    </List>
);

这在React-admin Datagrid 文档中有记录。