CSS 未加载带有 MUI 的 withStyles 中传递的属性答案

【问题标题】：CSS Not Loading with passed Property in withStyles of MUICSS 未加载带有 MUI 的 withStyles 中传递的属性
【发布时间】：2023-02-02 21:09:43
【问题描述】：

我有一个功能性的 React 组件，其样式定义如下：

const StyledInnerItem = withStyles((theme) => ({
  bgColor: {
    backgroundColor: (props) => {
      console.log('styledInnerItem color: ', props.color);
      return 'red';
    }
  }
}))(InnerItem);

基本上我试图将 props.color 作为背景色传递，但它甚至没有返回临时设置为 bg 颜色的红色。当我记录道具时，它从第一次渲染返回颜色，并添加到 html 文件中。但是只有当我点击我的组件并且颜色被应用到组件时才会添加样式。

当背景颜色不是函数时它工作正常，我需要它通过从道具读取颜色来工作。

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

问题可能是因为 withStyles HOC 仅在组件重新渲染时更新样式，但传递给组件的道具不会触发重新渲染。解决这个问题的一种方法是将颜色值作为状态传递给组件，并在道具更改时更新状态，这将触发重新渲染并且样式将得到更新。

以下是如何实现它：

const StyledInnerItem = withStyles((theme) => ({
  bgColor: {
    backgroundColor: (props) => props.color
  }
}))(InnerItem);

class InnerItemWrapper extends React.Component {
  state = {
    color: 'red'
  };

  componentDidUpdate(prevProps) {
    if (this.props.color !== prevProps.color) {
      this.setState({ color: this.props.color });
    }
  }

  render() {
    return <StyledInnerItem color={this.state.color} />;
  }
}

这样，当 props.color 改变时，组件会重新渲染，样式也会相应更新。

【讨论】：