reactjs - 覆盖材质 UI 样式的问题

Question

覆盖此特定填充的问题。我尝试使用 .MuiTableCell-root 但它也没有更新填充。

来自开发者工具的 Material UI 样式

.MuiTableCell-root {
    display: table-cell;
    padding: 16px;
}

来自我自己代码的样式

const styles = makeStyles({
  cell: {
    padding: '10px',
  },
});

来自类组件的示例表详细信息

render() {
    const { tab, classes } = this.props;
    ....
    return (
      <React.Fragment>
       <TableHead>
        <TableRow>
          <TableCell align="left" className={classes.cell} style={{ width: 250, fontWeight: 'bold' }}>Meeting Date</TableCell>
        </TableRow>
       </TableHead>
      </React.Fragment>
    )
}

....

export default withStyles(styles)(MeetingsList);

当我通过开发人员工具检查该特定单元格时，似乎它没有更新填充。它确实为我提供了我的组件名称，所以我想也许我的样式部分是错误的？

class="MuiTableCell-root MuiTableCell-head MeetingsList-cell-632 MuiTableCell-alignLeft"

如何从祖先覆盖嵌套 Material UI 组件的样式？

标签： reactjsmaterial-ui

Answer 1

对于您的问题，将填充道具设置为无就足够了：

<TableCell
  align="left"
  className={classes.cell}
  padding="none"
  style={{ width: 250, fontWeight: 'bold' }}
>
  Meeting Date
</TableCell>

但是，如果您只想使用与默认值不同的填充，则可以更改填充，classes.cell它将被添加。

const useStyles = makeStyles({
  cell: {
    padding: '4px',
  },
});

另一种选择是通过classes道具传递课程。通过这种方式，您可以对嵌套类进行特定的更改，而这些更改是以前的方法无法做到的。您可以传递给哪些类对象classes始终可以在文档中找到。链接到 TableCell 文档

您的组件将如下所示：

const useStyles = makeStyles({
  cell: {
    padding: '0px',
  },
});

...

render() {
  const classes = useStyles();
  return (
    <TableCell
      align="left"
      classes={{
        root: classes.cell,
      }}
      padding="none"
      style={{ width: 250, fontWeight: "bold" }}
    >
      Meeting Date
    </TableCell>
  );
};

...

export default MeetingList;

现场演示：