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

Question

取决于源（记录的）字段值（例如，状态列是“活动”）我想在 Datagrid 中使行背景具有某种颜色。我怎么做？感谢您提供任何示例代码！

Answer 1

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

例如，如果记录的一个值（例如其查看次数）超过某个阈值，则可以将自定义背景应用于整行。

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

这在The React-admin Datagrid Documentation中有记录。