自定义填充材质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

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

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

像往常一样将其提供给您TableCell；

<TableCell className={classes.cell}>

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