javascript - 在MUI表中更改样式

我正在创建一个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}>

我无休止地四处闲逛，根本没有任何效果。

有什么建议么？

最佳答案

如果查看DOM元素类名称，您会发现它以MuiPaper-root元素下的MuiGrid-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内，因此您可能要为padding添加Grid

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

类似的在线演示和相关的质量检查：

How to change material-ui Textfield label styles in react

关于javascript - 在MUI表中更改样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60749796/