Невозможно стилизовать строку заголовка для компонентов настраиваемого поля внутри Datagrid - PullRequest
Новая
       5

Невозможно стилизовать строку заголовка для компонентов настраиваемого поля внутри Datagrid

0 голосов
/ 01 мая 2019

При использовании настраиваемого поля в качестве дочернего элемента 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?

1 Ответ

0 голосов
/ 02 мая 2019

Вы можете использовать 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);
...