更改 MUI 表中的样式答案

【问题标题】：Changing the styling in MUI Table更改 MUI 表中的样式
【发布时间】：2020-06-30 03:39:27
【问题描述】：

我正在创建一个我认为是默认方式的 Material UI 表，并且我在内部获得了巨大的填充。

我尝试过使用withStyles 并将生成的类通过component 属性传递，如下所示：

const StyledPaper = withStyles(theme => ({
  root: {
    padding: "0",
  },
}), Paper);
...
        <Table component={StyledPaper}>

我已经尝试过制作课程并将它们传入：

const useStyles = makeStyles(theme => ({
  root: {
    padding: "0",
  },
}));
...
    const classes = useStyles();
...
        <Table classes={classes}>

我无休止地胡闹，一点效果都没有。

有什么建议吗？

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案1】：

如果您查看 DOM 元素类名，您会发现它在 MuiGrid-root 元素下以 MuiPaper-root 开头。

也许在这种情况下使用nesting selector 是自定义样式的好方法

import { withStyles } from "@material-ui/core/styles";
const styles = {
  root: {
    "& .MuiPaper-root": {
      padding: 0
    }
  }
};
...
const { classes } = this.props;
...
export default withStyles(styles)(App);

用法

注意它不在Table 内，因此您可能需要为Grid 添加padding

<Grid container>
  <Grid item className={classes.root} // ...>
    // ...
  </Grid>
</Grid>

【讨论】：

您的答案的坚果图是“注意它不在表格内”。不是。我认为“面板”是表格的一部分（由于我的一个微妙但完全的错误）。事实上，它是封闭组件的一部分，我在 JSS 中有一行读到 panel: { margin: "20%" }。当我删除它时，一切看起来都很好。我会接受你的回答，因为它太详细了，你值得加分。