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

Question

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

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

如果我们单击 Grid Toolbar 组件之一，它将显示 popup/popper，如下面的屏幕截图所示。

我想要做的是更改每个 Grid Toolbar 组件中每个 popup/popper 内的所有字体大小。

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

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

这是简单的代码：

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

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

所以我的问题是：

我们如何更改每个 Grid Toolbar 组件的 popup/popper 中的某些属性？
我们如何更改每个 Grid Toolbar 组件的 popup/popper 内的所有属性？

Answer 1

可以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参考。

V5

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

为了改变其他 2 GridMenus (density/export) 的样式，您需要定位 MuiDataGrid-menuList class 名称。目前我发现没有其他方法可以使用全局样式，因为 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
      }
    }
  }}
/>

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

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

javascript

css

reactjs

datagrid

material-ui