如何覆盖主题中的 mui 嵌套组件样式？

Question

我用 editable

DataGrid

创建了一个 mui

cells

。在编辑模式下，输入的填充默认为

0 16px

，如

mui

生成的样式所示：

.css-jqsvr8-MuiInputBase-root-MuiDataGrid-editInputCell input {
  padding: 0 16px;
  height: 100%;
}

我想覆盖上面的填充到主题内的

0 1px

我为我的

DataGrid

创建：

const theme = createTheme({   
  components: {
    MuiDataGrid: {
      styleOverrides: {
        cell: {
          padding: "0 1px",   // MuiDataGrid-cell default is "0 10px"
        },
        . . .
}

我不知道如何为上面的

styleOverrides

指定

MuiInputBase-root-MuiDataGrid-editInputCell

。更改正常的

cell

填充非常简单。

我已经阅读了覆盖嵌套组件样式，但仍然不知道如何在我的

theme

中指定覆盖它。

有人能指出我正确的方向吗？预先感谢！

Answer 1

试试这个片段

MuiDataGrid: {
      styleOverrides: {
        root: {          
          '& .MuiDataGrid-cell, & .MuiDataGrid-cell--editing': {
            //Your CSS goes here
          },       
          },
      },
    },

Answer 2

选择班级

.MuiDataGrid-editInputCell input

。

参见https://mui.com/x/api/data-grid/data-grid/#classes

    <DataGrid
      sx={{
        '& .MuiDataGrid-editInputCell input': {
          padding: '0 1px',
        },
      }}
    />