在 createMuiTheme 或 makeStyles / styled 中反应 Material UI DataGrid 样式 MuiDataGrid-window答案

【问题标题】：在 createMuiTheme 或 makeStyles / styled 中反应 Material UI DataGrid 样式 MuiDataGrid-window
【发布时间】：2021-05-06 17:58:24
【问题描述】：

我正在努力更改 MatierialUi DataGrid 中 .MuiDataGrid-window 的 css。因此我遵循https://material-ui.com/api/data-grid/的css规则

我在 createMuiTheme 中尝试过它，它工作正常，但不适用于窗口。我还尝试了很多不同的组合，例如 MuiDataGrid-window 或直接在覆盖下的“MuiDataGrid-window”，但没有任何效果..

export const theme = createMuiTheme({
  overrides: {
    MuiDataGrid: {
      root: {
        backgroundColor: 'red',
      },
      window: {
        width: '120%',
      },
    },
  }
});

下一个尝试是styled DataGrid 组件，它也没有成功。两者都没有工作。样式化的组件将是我的首选方式！

const StyledDataGrid = styled(DataGrid)({
  MuiDataGrid: {
    root: {
      backgroundColor: 'green',
    },
    window: {
      width: '120%',
    }
  }
});

也许我完全走错了路。但是如何在 MUI 的 API 中设置 CSS 属性的样式，例如 .MuiDataGrid-mainGridContainer、.MuiDataGrid-overlay、.MuiDataGrid-columnsContainer、.MuiDataGrid-colCellWrapper 等。

非常感谢，也许它对其他人有帮助:)

【问题讨论】：

如文档所述，该组件只有 root 规则名称。您可以像使用任何其他类选择器一样使用这些类选择器。如果您想使用类 .MuiDataGrid-window 设置 DOM 元素的样式，只需使用该选择器即可。

标签： css reactjs datagrid material-ui mui-datatable

【解决方案1】：

如果您检查应用的样式，则窗口类元素有两个关联的选择器（多个类）：

.MuiDataGrid-root .MuiDataGrid-window

要在子元素中应用样式，例如网格根中的窗口，您需要同时选择它们：

MuiDataGrid: {
  root: {
    backgroundColor: 'red',
    '& .MuiDataGrid-window': {
      backgroundColor: 'green'
    }
  }
}

在documentation 中，网格组件只有一个规则名称：root

【讨论】：