如何在 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

Answer 2

For decide this problem i used combination of styled components, useStyles and rowStyle for Datagrid.

StyledEmailField.js:

import {makeStyles} from "@material-ui/core/styles";
import {EmailField} from "react-admin";
import React from "react";
import classnames from 'classnames';

const useStyles = makeStyles({
    isDeleted: {
        textDecoration: "line-through",
    },
});

export const DatagridUsersProps = {
    rowStyle: (record, index) => {
        return {
            backgroundColor: (record.is_blocked) && "silver",
            color: (record.is_deleted) && "#616161",
        };
    }
};
export const StyledEmailField = props => {
    const classes = useStyles();
    return (
        <EmailField
            className={classnames({
                [classes.isDeleted]: props.record.is_deleted,
            })}
            {...props}
        />
    );
};

UseStales.js:

import React from "react";
import {makeStyles} from "@material-ui/core/styles";

export const stylesForUsersList = makeStyles({
    root: {
        "& td": {
            color: 'inherit',
        },
        "& table": {
            color: 'inherit',
        },
        "& td a, & td a span": {
            color: 'inherit',
        },
        "& td span": {
            color: 'inherit',
        }
    }
});

List.jsx:

import React from "react";
import { List, Datagrid, TextField, EditButton,usePermissions} from 'react-admin';

import { ScrollingWrapper } from '../../../components/ScrollingWrapper';
import { StyledEmailField } from '../../../components/fields/StyledEmailField';
import { CustomersFilter } from './ListFilters';
import {HideBlockUnblockButtonIfDeleted} from '../../../components/toolbars/BlockUnblockButton';
import DeleteRestoreButtons from '../../../components/toolbars/DeleteRestoreButtons';
import {DatagridUsersProps} from "../../../components/_helpers/props/DatagridProps";
import {stylesForUsersList,
} from "../../../components/_helpers/useStyles";
import {UserRole} from "../../../entities";

const defaultSort = { field: 'id', order: 'DESC' };


export const CustomersList = props => {
    const classes = stylesForUsersList()

    const { permissions } = usePermissions();
    if (!permissions) {
        return null;

    }
    return (
        <List
            {...props}
            sort={defaultSort}
            exporter={false}
            bulkActionButtons={false}
            filters={<CustomersFilter />}
            perPage={22}
            classes={classes}
        >
            <ScrollingWrapper>
                <Datagrid {...DatagridUsersProps}>
                    <TextField source="id" />
                    <TextField source="first_name" />
                    <TextField source="last_name" />
                    <StyledEmailField source="email" />     
                    <HideBlockUnblockButtonIfDeleted entity={"user"}/>
                    {(permissions.role === UserRole.admin) &&
                        <DeleteRestoreButtons/>}
                </Datagrid>
            </ScrollingWrapper>
        </List>
    );
}