I'm creating a custom Data Grid Toolbar ponent by modifying existing Grid Toolbar ponents from Material UI v4.

Here is the official example for the Grid Toolbar ponents:

If we click one of the Grid Toolbar ponents, it will show a popup/popper as seen in the screenshot below.

What I want to do is to change all font sizes inside every popup/popper from each Grid Toolbar ponent.

I try to change one text for example. As we can see from the screenshot below, if we inspect the text then change the font-size and color properties directly, it would change.

But if I grab and copy the selector (in this case is .MuiTypography-body1), then I paste it in my code, there nothing changes (the font-size and color properties don't change).

Here is the simple code:

const CustomGridToolbarColumns = withStyles((theme) => ({
  root: {
    color: "dodgerblue",
    "& .MuiTypography-body1": {
      fontSize: 20,
      color: "red"
    }
  }
}))(GridToolbarColumnsButton);

I also want to change all font-size and color properties inside each popup/popper of each Grid Toolbar ponent. I inspect the popup/popper then change the font-size and color properties but still don't work as seen in the screenshot below.

Here are the dependencies (in package.json file):

"@material-ui/core": "^4.12.3",
"@material-ui/styles": "^4.11.4",
"@mui/x-data-grid-pro": "^4.0.0",

Here is the full code:

So my questions are:

1. how can we change some properties inside the popup/popper of every Grid Toolbar ponent?
2. how can we change all properties inside the popup/popper of every Grid Toolbar ponent?

I'm creating a custom Data Grid Toolbar ponent by modifying existing Grid Toolbar ponents from Material UI v4.

Here is the official example for the Grid Toolbar ponents:

If we click one of the Grid Toolbar ponents, it will show a popup/popper as seen in the screenshot below.

What I want to do is to change all font sizes inside every popup/popper from each Grid Toolbar ponent.

I try to change one text for example. As we can see from the screenshot below, if we inspect the text then change the font-size and color properties directly, it would change.

But if I grab and copy the selector (in this case is .MuiTypography-body1), then I paste it in my code, there nothing changes (the font-size and color properties don't change).

Here is the simple code:

const CustomGridToolbarColumns = withStyles((theme) => ({
  root: {
    color: "dodgerblue",
    "& .MuiTypography-body1": {
      fontSize: 20,
      color: "red"
    }
  }
}))(GridToolbarColumnsButton);

I also want to change all font-size and color properties inside each popup/popper of each Grid Toolbar ponent. I inspect the popup/popper then change the font-size and color properties but still don't work as seen in the screenshot below.

Here are the dependencies (in package.json file):

"@material-ui/core": "^4.12.3",
"@material-ui/styles": "^4.11.4",
"@mui/x-data-grid-pro": "^4.0.0",

Here is the full code: https://codesandbox.io/s/data-grid-material-ui-custom-toolbar-kd9gj

So my questions are:

1. how can we change some properties inside the popup/popper of every Grid Toolbar ponent?
2. how can we change all properties inside the popup/popper of every Grid Toolbar ponent?

• javascript
• reactjs
• material-ui
• datagrid
• mui-x-data-grid

Share Improve this question Follow edited Mar 27 at 7:37 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Oct 13, 2021 at 3:28 Jabal LogianJabal Logian 2,36066 gold badges2727 silver badges5555 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can inspect the element and see that the ponent you need to apply the style to is called GridPanel. This is the wrapper ponent of the filters and columns panel. See all the ponent slots here for reference.

V5

<DataGrid
  {...data}
  ponents={{
    Toolbar: GridToolbar,
  }}
  ponentsProps={{
    panel: {
      sx: {
        '& .MuiTypography-root': {
          color: 'dodgerblue',
          fontSize: 20,
        },
        '& .MuiDataGrid-filterForm': {
          bgcolor: 'lightblue',
        },
      },
    },
  }}
/>

In order to change the styles of the other 2 GridMenus (density/export), you need to target the MuiDataGrid-menuList class name. Currently I see there is no other way around using global styles because DataGrid does not allow you to customize the GridMenu ponent:

<GlobalStyles
  styles={{
    '.MuiDataGrid-menuList': {
      backgroundColor: 'pink',

      '& .MuiMenuItem-root': {
        fontSize: 26,
      },
    },
  }}
/>

V4

import { DataGrid, GridToolbar, GridPanel } from "@mui/x-data-grid";

const useStyles = makeStyles({
  panel: {
    '& .MuiTypography-root': {
      color: 'dodgerblue',
      fontSize: 20,
    },
  },
});

<DataGrid
  {...data}
  ponents={{
    Toolbar: GridToolbar,
  }}
  ponentsProps={{
    // GridPanel
    panel: { className: classes.panel },
  }}
/>

<GlobalStyles
  styles={{
    ".MuiDataGrid-gridMenuList": {
      backgroundColor: "pink",

      "& .MuiMenuItem-root": {
        fontSize: 26
      }
    }
  }}
/>