Question

我真的很努力地尝试更改 MaterialUi .MuiDataGrid-window 中 DataGrid 的 css。因此我遵循了 https://material-ui.com/api/data-grid/

中的 css 规则

我在 createMuiTheme 中为 root 尝试过它工作正常，但不适用于 window。我还尝试了很多不同的组合，例如 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 等。

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

Answer 1

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

.MuiDataGrid-root .MuiDataGrid-window

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

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

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

在 createMuiTheme 或 makeStyles / styled

1 个答案: