CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
pravin kottawar
pravin kottawar

Reputation: 25

Modify default classes of DataGrid material UI

In "DataGrid" material UI I am trying to modify the css properties like font weight, overflow of header.

Here is my jsx code

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: {
        '& .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>
    );
}

I also tried to add properties like font weight and overflow in super-app-theme--header but it didn't work. Some properties like background colour are working but the properties which are already there in MuiDataGrid-columnHeaderTitle are not getting overridden.

Upvotes: 2

Views: 5481

Answers (2)

Micky Balladelli
Micky Balladelli

Reputation: 9991

Using MUI V5+ and building on Pravin's answer you can define the header style this way:

<Datagrid
  sx={{
    '.MuiDataGrid-columnHeaderTitle': { 
       fontWeight: 'bold !important',
       overflow: 'visible !important'
    }
  }}
/>

Upvotes: 5

pravin kottawar
pravin kottawar

Reputation: 25

I created a css file and in that overridden the properties with same class name and imported that css file

Here is the css code

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

Upvotes: 3

Related Questions