2

我正在努力更改.MuiDataGrid-windowin MatierialUi的 css DataGrid。因此，我遵循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%',
      },
    },
  }
});

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

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

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

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

4

1 回答 1

2

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

.MuiDataGrid-root .MuiDataGrid-window

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

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

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

于 2021-02-19T01:55:15.040 回答