Question

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

来自开发者工具的材料 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"

How to override style of nested Material UI component from the ancestors?

Answer 1

对于您的问题，将 padding 属性设置为 none 就足够了：

<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 的类对象始终可以在文档中找到。 Link to TableCell Docs

您的组件将如下所示：

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;

现场演示：

Answer 2

感谢其他人的所有帮助。这是我在接受其他人的帮助后最终更新的解决方案。

我的是一个类组件，所以我遇到了另一个错误（钩子调用无效。只能在函数组件的主体内部调用钩子。这可能是由于以下原因之一造成的：）

所以我只是更新了另一篇文章的一些部分

How to style components using makeStyles and still have lifecycle methods in Material UI?

const styles = () => ({
  tableCell: {
    padding: '10px',
  },
});

class MeetingsList extends React.Component {
  constructor(props) {
    super(props);
    ....
  }

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

....

export default withStyles(styles)(MeetingsList);

覆盖材料 UI 样式的问题

2 个答案:

现场演示：