使用`sx`在react-admin

Question

since

makeStyles

被弃用：https：//mui.com/system/styles/basics/。我正在尝试使用

sx

prop。 我很难理解如何将其与React-Admin组件一起使用。 llet说我有一个可以在

Error

领域下的日志列表，我想适当地上色。 我尝试了这样的事情：

Warning

但不能在

Info

中使用。

任何想法如何使它起作用？

您需要访问记录，例如使用

type

钩：

const LogList = ({ permissions, ...props }) => {
  return (
    <List
      {...props}
      title="Logs"
      filters={<LogFilter />}
      perPage={25}
      bulkActionButtons={false}
    >
      <Datagrid rowClick="show">
        <TextField
          source="type"
          label="Type"
          sx={ record.type === "Error" ? {color: "red"} : {color: "blue"}}
        />
        <TextField
          source="description"
          label="Description"
        />
        <DateField
          source="createdAt"
          label="Created At"
        />
      </Datagrid>
    </List>
  );
};

record

尝试这个

Answer 1

rowsx

Prop，应该是可呼出的，接受（记录，索引）和返回该行所需的SX定义。

sx

MUI DataGrid提供类似的

GetRowClassName

Answer 2