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

Question

我正在通过从Material-UI 修改现有的Grid Toolbar 组件来创建自定义Data Grid Toolbar 组件。

Here 是Grid Toolbar 组件的官方示例：

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

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

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

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

下面是简单的代码：

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

我还想更改每个Grid Toolbar 组件的每个弹出/弹出窗口内的所有font-size 和color 属性。 我检查了弹出/弹出窗口，然后更改了 font-size 和 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

所以我的问题是：

1. 我们如何更改每个Grid Toolbar 组件的popup/popper 中的一些属性？
2. 我们如何更改每个 Grid Toolbar 组件的 popup/popper 中的所有属性？

Answer 1

您可以inspect the element 并看到您需要应用样式的组件称为GridPanel。这是过滤器和列面板的包装器组件。查看所有组件槽here 以供参考。

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
      }
    }
  }}
/>