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

Question

我想更改行的文本颜色，但找不到决定。我试过这个代码"颜色"；不起作用，但"；backgroundColor"；工作

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挂钩覆盖组件类。使用inspect元素查找组件类名。

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

根据此处的文档https://marmelab.com/react-admin/doc/3.19/Theming.html

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

希望这能帮助

Answer 2

为了解决这个问题，我使用了样式组件的组合，为Datagrid使用样式和rowStyle。

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