自定义填充材质UI表-最后一个孩子

Question

我正在尝试调整Material-UI表的填充。 我要调整“最后一个孩子”的内边距为24px。我试图覆盖主题并使用类{{root：classes.xxx}}，但无法更改。 下面是我用于覆盖主题的代码（我也尝试覆盖MuiTableRow和MuiTableColumn）：

const theme = createMuiTheme({

overrides: {
MuiTableCell: {
  root: {
    paddingTop: 4,
    paddingBottom: 4,
        '&  $lastChild': { paddingRight: '5px' },
  },
  paddingDefault: {
    padding: '40px 12px 40px 16px',
  },

  },
},
});

这是我要更改的CSSS（表中每行的最后一个单元格）：

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

希望有人可以伸出援手。

/ H

Answer 1

那是正确的方法，您的JSS中只有一些语法错误。

最后一个子选择器应为：

'&:last-child': {}

这是一个完整的示例

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

Answer 2

对于那些不想覆盖主题的人，您可以通过提供类对象 prop 来实现相同的结果，如here 所示。

const useStyles = makeStyles({
  cell: {
    '&:last-child': {
      paddingRight: 5,
    },
  },
});

照常提供给您的TableCell；

<TableCell className={classes.cell}>

这将覆盖您单元格的 &:last-child 属性。我发现当我不更改主题中的任何其他内容时，这种方法会更方便一些。