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

问题描述

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

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

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

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

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

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

这是简单的代码：

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

所以我的问题是：

我们如何更改每个Grid Toolbar组件的弹出/弹出窗口中的一些属性？
我们如何更改每个Grid Toolbar组件的弹出/弹出窗口中的所有属性？

标签： javascriptcssreactjsdatagridmaterial-ui

解决方案

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

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

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

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

问题描述

解决方案

推荐阅读