如何在react-admin中更改数据网格行文本颜色？

Question

我想为行更改文本颜色，但找不到决定。我尝试了此代码。 “颜色”不起作用，而是“背景色”工作。

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

感谢您提供任何示例代码或链接！

Answer 1

我相信您可以使用它们的 makeStyle 挂钩来覆盖组件类。使用检查元素查找组件类名称。

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

根据他们的文档 https://marmelab.com/react-admin/doc /3.19/主题.html

您可能不仅想覆盖根组件样式，还想覆盖根内组件的样式。在这种情况下，className 属性是不够的。您可以利用classes 属性来自定义组件内部使用的类。

希望这有帮助

Answer 2

为了解决这个问题，我使用了样式组件的组合，useStyles 和 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>
    );
}