在 DataGrid Toolbar 的弹出组件 Material-UI 中添加自定义样式

Question

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:

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

Answer 1

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

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

const MyGridPanel = withStyles((theme) => ({
  root: {
    "& .MuiTypography-root": {
      color: "dodgerblue",
      fontSize: 20
    }
  }
}))(GridPanel);

<DataGrid
  {...data}
  components={{
    Toolbar: GridToolbar,
    Panel: MyGridPanel
  }}
/>

In order to change the styles of the other 2 GridMenu s (density/export), you need to target the MuiDataGrid-gridMenuList className . Currently I see there is no other way around that because DataGrid does not allow you to customize the GridMenu component:

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

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

Live Demo