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

Question

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

这是组件的官方示例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);

我还想更改每个组件的每个弹出窗口/弹出窗口内的font-size所有属性。我检查弹出窗口/弹出窗口，然后更改和属性，但仍然不起作用，如下面的屏幕截图所示。colorGrid Toolbarfont-sizecolor

以下是依赖项（在 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组件的弹出窗口/弹出窗口内的某些属性？
2. 我们如何更改每个Grid Toolbar组件的弹出窗口/弹出窗口内的所有属性？

Answer 1

您可以检查该元素并看到需要应用样式的组件被称为GridPanel。这是过滤器和列面板的包装组件。请参阅此处的所有组件插槽以供参考。

V5

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

为了更改其他 2 的样式GridMenu（密度/导出），您需要以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
      }
    }
  }}
/>