Question 109440 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Conditional styling using `sx` in React-Admin

Since makeStyles is deprecated: https://mui.com/system/styles/basics/. I’m trying to implement new approach with sx prop.

I’m having trouble understanding how to use it with React-Admin components.

Let’s say I have a list of Logs which can be Error, Warning, or Info under type field, and I want to color it appropriately.

I’ve tried something like this:

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>
  );
};

But record cannot be used in sx.

Any ideas how to make it work?

Tags:

2

Answers


  1. 0 
    sx={{color:record.type === "Error" ? "red":"blue"}}

    Try this one

    Login or Signup to reply.
  2. 0

    You need to access the record, for example with the useRecordContext() hook:

    import { useRecordContext, TextField } from 'react-admin'
...
const TypeField = () => {
  const record = useRecordContext()

  return (
    <TextField
      source="type"
      label="Type"
      sx={{ color: record?.type === "Error" ? "red" : "blue" }}
    />
  )    
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search