CODEWITHSUNDEEP
reactjsmaterial-ui
noob
noob

Reputation: 63

Change the color of Material UI datagrid components

How can I change the color of all the components of the Material UI Datagrid? I've tried using styling prop but it only changes the color of the header and row contents.

<DataGrid
   sx={{fontFamily:"Plus Jakarta Sans, sans-serif", color:'#EEF1F6',}}
   getRowId={(row) => row.id}
   rows={rows}
   columns={columns}
   checkboxSelection 
   disableSelectionOnClick
   onSelectionModelChange={(id) => {
   setidSelect(id);
   console.log(id);}}/>

But I need to change the font color of the footer contents and checkboxes.

Upvotes: 4

Views: 14090

Answers (2)

Asma Belaidi
Asma Belaidi

Reputation: 21

We use the: & .MuiDataGrid-columnHeader and & .MuiDataGrid-cell selectors to target the header and cell elements inside the DataGrid. example: To change the header background color and text color of a Material-UI DataGrid you can utilize the sx prop provided by MUI. In the sx prop, you can target the .MuiDataGrid-columnHeader and .MuiDataGrid-cell classes to style the header and cells, respectively. Here's the code snippet:

    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        
        pageSizeOptions={[5, 10]}
        checkboxSelection
        sx={{
           '& .MuiDataGrid-columnHeader, & .MuiDataGrid-cell': {
            backgroundColor: "blue",
            color: "white",
            fontWeight: 700,
         },
       }}
    />
</div>

Upvotes: 1

prog2011
prog2011

Reputation: 61

check this url https://mui.com/x/react-data-grid/style/

<DataGrid
  {...data}
  sx={{
    boxShadow: 2,
    border: 2,
    borderColor: 'primary.light',
    '& .MuiDataGrid-cell:hover': {
      color: 'primary.main',
    },
  }}
/>

Upvotes: 2

Related Questions