React-Admin中使用sx prop实现条件样式的问题求助

你遇到的问题核心在于：React-Admin的字段组件（如TextField）的sx prop是在组件初始化阶段计算的，无法直接访问每行的record数据。要实现根据type字段动态设置颜色，你可以通过字段组件的render属性来实现，具体方案如下：

方案1：使用render prop自定义内容样式 #

直接利用TextField提供的render回调，在回调中获取当前行的record，然后返回带有动态sx样式的元素：

const LogList = ({ permissions, ...props }) => {
  // 定义类型对应的颜色映射
  const getTypeColor = (type) => {
    switch(type) {
      case "Error":
        return "red";
      case "Warning":
        return "orange";
      case "Info":
        return "blue";
      default:
        return "inherit";
    }
  };

  return (
    <List
      {...props}
      title="Logs"
      filters={<LogFilter />}
      perPage={25}
      bulkActionButtons={false}
    >
      <Datagrid rowClick="show">
        <TextField
          source="type"
          label="Type"
          render={({ record }) => (
            <span sx={{ color: getTypeColor(record.type) }}>
              {record.type}
            </span>
          )}
        />
        <TextField source="description" label="Description" />
        <DateField source="createdAt" label="Created At" />
      </Datagrid>
    </List>
  );
};

方案2：自定义可复用的字段组件 #

如果需要在多个地方使用这个带颜色的类型字段，可以封装成独立组件，提升复用性：

// 自定义TypeField组件
const TypeField = ({ record }) => {
  let color;
  switch(record.type) {
    case "Error":
      color = "red";
      break;
    case "Warning":
      color = "orange";
      break;
    case "Info":
      color = "blue";
      break;
    default:
      color = "inherit";
  }
  return <span sx={{ color }}>{record.type}</span>;
};

// 在LogList中使用
const LogList = ({ permissions, ...props }) => {
  return (
    <List
      {...props}
      title="Logs"
      filters={<LogFilter />}
      perPage={25}
      bulkActionButtons={false}
    >
      <Datagrid rowClick="show">
        <TypeField source="type" label="Type" />
        <TextField source="description" label="Description" />
        <DateField source="createdAt" label="Created At" />
      </Datagrid>
    </List>
  );
};

原理说明 #

React-Admin的字段组件（如TextField）的顶层sx是作用于整个单元格容器的，而非行内的内容元素，且无法动态绑定每行的record数据。而render prop会在每行渲染时触发，能获取到当前行的record，因此可以在这个回调中针对内容元素设置动态样式。

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