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

【问题标题】：Cannot style header row for custom field components inside Datagrid无法为 Datagrid 中的自定义字段组件设置标题行样式
【发布时间】：2019-05-01 13:20:07
【问题描述】：

当使用自定义字段作为 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 列标题添加样式？

【问题讨论】：

标签： react-admin

【解决方案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);

【讨论】：