css - 自定义 Material UI 表格样式 - 最后一个子项

Question

我正在尝试调整 Material UI Table 的填充。last-child 的内边距为 24px，我想调整它。我尝试覆盖主题并使用 classes{{root:classes.xxx}} 但无法更改它。

下面是我用于覆盖主题的代码(我还尝试覆盖 MuiTableRow 和 MuiTableColumn):

const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      root: {
        paddingTop: 4,
        paddingBottom: 4,
        '&  $lastChild': { paddingRight: '5px' },
      },
      paddingDefault: {
        padding: '40px 12px 40px 16px',
      },
    },
  },
});

这是我试图更改的 CSS(表格中每行的最后一个单元格):

.MuiTableCell-root-511:last-child {
    padding-right: 24px;
}

希望有人能够伸出援手。

Answer 1

这是正确的方法，您的 JSS 中只是存在一些语法错误。

最后一个子选择器应该是:

'&:last-child': {}

这是一个完整的示例

const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      root: {
        paddingTop: 4,
        paddingBottom: 4,
        "&:last-child": {
          paddingRight: 5
        }
      }
    }
  }
});