How to change datagrid rows text color in react-admin?

Question

I want change a text color for row, but can't find decision. I tried this code. "color" not working, but "backgroundColor" working.

export const CustomersList = props => {
    const DatagridUsersProps = {
        rowStyle: (record, index) => {
            return {
                color: "#FFCC00",
                backgroundColor: (record.is_blocked || record['is_deleted']) && "silver",
            };
        }
    };
    return (
        <List
            {...props}
        >
            <ScrollingWrapper>
                <Datagrid {...DatagridUsersProps}>
                    <TextField source="id" />
                    <LinkField source="first_name" />
                    <LinkField source="last_name" />
                    <EmailField source="email" />
                    <PhoneField source="phone" />
                </Datagrid>
            </ScrollingWrapper>
        </List>
    );
}

Thank you for any sample code or link to do that!

Answer 1

I believe you can override component class using their makeStyle hooks. Find the component class name using inspect element.

const useStyles = makeStyles({
table: {
    backgroundColor: 'Lavender',
},
headerCell: {
    backgroundColor: 'MistyRose',
}
cell: {
    backgroundColor: 'Pink',
}, });

as per their documentation here https://marmelab.com/react-admin/doc/3.19/Theming.html

you may want to override not only the root component style, but also the style of components inside the root. In this case, the className property isn’t enough. You can take advantage of the classes property to customize the classes that the component uses internally.

hope this helps