Блог

В пользовательском интерфейсе материала «DataGrid» я пытаюсь изменить свойства css, такие как вес шрифта, переполнение заголовка.

Вот мой код jsx

 import React, {useState, useEffect} from 'react';
import {DataGrid, GridToolbarContainer, GridToolbarExport} from '@material-    ui/data-grid';
import {makeStyles} from '@material-ui/styles';

const useStyles = makeStyles({
    root: {
        'amp; .super-app-theme--header': {
            backgroundColor: 'white'
        }
    },
    '.MuiDataGrid-root .MuiDataGrid-columnHeaderTitle': {
        fontWeight: 'bold',
        overFlow: 'visible'
    }
});
function CustomToolbar() {
    return (
        <GridToolbarContainer>
            <GridToolbarExport />
        </GridToolbarContainer>
    );
}

export default function DataTable(props) {
    const classes = useStyles();
    return (
        <div style={{height: '700px', width: '100%'}} className={classes.root}>
            <DataGrid
                rows={props.records}
                columns={props.headers}
                pageSize={12}
                components={{
                    Toolbar: CustomToolbar
               }}
            />
        </div>
    );
}
 

Я также попытался добавить такие свойства, как вес шрифта и переполнение, super-app-theme--header но это не сработало. Некоторые свойства, такие как цвет фона, работают, но свойства, которые уже есть, MuiDataGrid-columnHeaderTitle не переопределяются.

Я создал файл css и в нем переопределил свойства с тем же именем класса и импортировал этот файл css

Вот код css

.MuiDataGrid-columnHeaderTitle { font-weight: bold !important; overflow: visible !important; }