自定义 MUI 表格样式 - last-child答案

【问题标题】：Customize MUI Table styles - last-child自定义 MUI 表格样式 - last-child
【发布时间】：2019-03-03 02:17:29
【问题描述】：

我正在尝试调整 MUI 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;
}

希望有人能伸出援助之手。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

在MUI v5中，您可以使用sx prop 并选择最后一个TableCell，如下所示：

<Table
  sx={{
    '& .MuiTableCell-root:last-child': {
      bgcolor: 'pink',
    },
  }}
>

或者如果你想使用createTheme() 全局覆盖：

const theme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        root: {
          '&:last-child': {
            backgroundColor: 'tomato',
          },
        },
      },
    },
  },
});

现场演示

【讨论】：

【解决方案2】：

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

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

照常提供给您的TableCell；

<TableCell className={classes.cell}>

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

【讨论】：

【解决方案3】：

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

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

'&:last-child': {}

这里有一个完整的例子

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

【讨论】：

非常感谢卢克！