Question

将自定义字段用作Datagrid的子级时，似乎无法设置列标题的样式。
具体来说，我想在列标题文本中添加一个左边距。
文档说要使用headerClassName，但是与自定义组件一起使用时无效。

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

const TextField = ({ source, record = {} }) => <span>{record[source]}</span>;

export const UserList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="lastName" label="Last Name" />
        </Datagrid>
    </List>
);

在代码示例中，如何为Last Name列标题添加样式？

Answer 1

您可以使用CSS API：https://marmelab.com/react-admin/List.html#the-datagrid-component

提示：如果要为每个列独立覆盖标题和单元格样式，请在组件中使用headerClassName和cellClassName道具。例如，要在小屏幕上隐藏某个列：

文档示例：

import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
    hiddenOnSmallScreens: {
        [theme.breakpoints.down('md')]: {
            display: 'none',
        },
    },
});

const PostList = ({ classes, ...props }) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <TextField
                source="views"
                headerClassName={classes.hiddenOnSmallScreens}
                cellClassName={classes.hiddenOnSmallScreens}
            />
        </Datagrid>
    </List>
);

export default withStyles(styles)(PostList);

无法为Datagrid中的自定义字段组件设置标题行样式

1 个答案: