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

我正在创建一个自定义Data Grid Toolbar通过修改现有组件Grid Toolbar组件来自材质-UI https://v4.mui.com/.

Here https://v4.mui.com/components/data-grid/filtering/是官方的例子Grid Toolbar成分：

如果我们单击其中之一Grid Toolbar组件，它将显示一个弹出窗口/弹出窗口，如下面的屏幕截图所示。

我想要做的是更改每个弹出窗口/弹出窗口中的所有字体大小Grid Toolbar成分。

例如，我尝试更改一个文本。 正如我们从下面的屏幕截图中看到的，如果我们检查文本然后更改font-size and color直接属性，它就会改变。

但是如果我抓取并复制选择器（在本例中是.MuiTypography-body1），然后我将其粘贴到我的代码中，没有任何变化（font-size and color属性不变）。

这是简单的代码：

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

我也想改变一切font-size and color每个弹出窗口/弹出窗口中的属性Grid Toolbar成分。 我检查弹出窗口/弹出窗口然后更改font-size and color属性，但仍然无法正常工作，如下面的屏幕截图所示。

以下是依赖项（在 package.json 文件中）：

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

这是完整的代码：https://codesandbox.io/s/data-grid-material-ui-custom-toolbar-kd9gj https://codesandbox.io/s/data-grid-material-ui-custom-toolbar-kd9gj

So 我的问题 are:

1. 我们如何更改每个弹出窗口/弹出窗口中的某些属性Grid Toolbar成分？
2. 我们如何更改每个弹出窗口/弹出窗口内的所有属性Grid Toolbar成分？

You can 检查元素 https://i.stack.imgur.com/Z5mnM.png并看到您需要应用样式的组件被称为GridPanel。这是过滤器和列面板的包装组件。查看所有组件插槽here https://v4.mui.com/api/data-grid/data-grid/#slots以供参考。

V5

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

为了改变其他2的风格GridMenus（密度/出口），您需要瞄准MuiDataGrid-menuList班级名称。目前我发现没有其他方法可以使用全局样式，因为DataGrid不允许您自定义GridMenu成分：

<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}
  components={{
    Toolbar: GridToolbar,
  }}
  componentsProps={{
    // GridPanel
    panel: { className: classes.panel },
  }}
/>

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

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