覆盖材质 UI 样式的问题

Posted 2023-02-22

【中文标题】覆盖材质 UI 样式的问题

【英文标题】：Issues overriding material UI styles

【发布时间】：2021-09-11 15:47:17

【问题描述】：

覆盖此特定填充的问题。我尝试使用 .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"

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

【问题讨论】：

& .MuiTableCell-root（MuiTableCell 没有-root 在任何地方都不作为一个类存在）不起作用的原因是& 符号和.MuiTableCell-root 之间的空间。这表示要针对具有类.MuiTableCell-root 的单元格的任何后代，但该类位于单元格本身上。如果您删除空格，则意味着定位具有您的自定义类（由& 表示）和MuiTableCell-root 的单元格，这应该可以工作。但是，正如 yun_jay 的回答中所指出的，这种更复杂的语法是不必要的。

谢谢。我尝试删除空间，但效果不佳。我已经添加了相关代码供参考。

另一个问题是您正在使用makeStyles 和withStyles。这些是彼此的替代品——它们不能一起使用。 makeStyles 仅用于功能组件，您似乎正在使用类组件。只需删除 makeStyles 调用，以便 styles 引用您当前传递给 makeStyles 的对象。

【参考方案1】：

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

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

所以我刚刚更新了其他帖子中的一些部分

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);

【参考方案2】：

对于您的问题，将 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 prop 传递课程。通过这种方式，您可以对嵌套类进行特定的更改，而这些更改是以前的方法无法做到的。您可以将哪些类对象传递给 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;

现场演示：

【讨论】：

感谢您的明确解释。无填充有效，但我尝试编辑 useStyles 部分，它仍然没有将填充更新为 10px，并且如果我排除无填充，则保持为无填充或默认值。