如何根据 props 更改 react-admin 组件中一行的背景颜色？

Question

I'm designing a react-admin table, and I want to determine a row's background color by the "active" source of the row - if it's true I want the row background color to be green, otherwise I want it to be red. I tried material ui's "makeStyles" with no success (all of this stuff is new to me).

This is my table:

const myTable = (props) => {

    return (
        <List {...props} pagination={<PostPagination />}>
            <Datagrid>
                <NumberField source="id" />
                <TextField source="name" />
                <TextField source="category" />
                <TextField source="platform" />
                <NumberField source="major" />
                <NumberField source="minor" />
                <BooleanField source="active" label="active"/>
                <DateField source="audit" />
                <EditButton basePath="versions" />
                <DeleteButton basePath="versions" />
            </Datagrid>
        </List>
    )

}

Thank you very much for any help!

Answer 1

Good afternoon, i didn't really understand that you have strings here, but there are many different options for example:

1. <MyRow style={{background: (isActive? 'red': 'green')} />
2. <MyRow className={isActive? classes.activeRow: null />

In the first variant, you do not need to do anything with the styles, and in the second you will have to create a style for example through makeStyles.

const useStyles = makeStyles((theme) => ({
    activeRow:{
        backgroundColor: theme.palette.primary.main
    }
  }));