Add custom style inside DataGrid Toolbar’s popup component Material-UI

I’m creating a custom Data Grid Toolbar component by modifying existing Grid Toolbar components from Material-UI.

Here is the official example for the Grid Toolbar components:

If we click one of the Grid Toolbar components, 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 component.

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 component. 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:

how can we change some properties inside the popup/popper of every Grid Toolbar component?
how can we change all properties inside the popup/popper of every Grid Toolbar component?

Answer

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

<DataGrid
  {...data}
  components={{
    Toolbar: GridToolbar,
  }}
  componentsProps={{
    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 component:

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

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

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

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

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

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

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

Advertisement

Answer