在多个样式的HoC上具有样式的Material UI withStyles

Question

当我将多个HoC应用于一个组件时，我的应用程序将HoC用作其模态，并使用withStyles对其样式进行设置，但是第一个HoC的类属性将传递给该组件的下一个。HoC1示例：const styles = themes => ({    HoCOneStyle: {        margin: 'auto'    }})const withHoCOne = (WrappedComponent) => {    class HoCOne extends React.Component {        <HoC Stuff className={classes.HoCOneStyle} />        <WrappedComponent        {...this.props}        />    }    return withStyles(styles, {withTheme: true})(HoCOne);}export default withHoCOne;示例HoC2：const styles = themes => ({    HoCTwoStyle: {        margin: 'auto'    }})const withHoCTwo = (WrappedComponent) => {    class HoCTwo extends React.Component {        <HoC Stuff className={classes.HoCTwoStyle} />        <WrappedComponent        {...this.props}        />    }    return withStyles(styles, {withTheme: true})(HoCTwo);}export default withHoCTwo;示例组件：class DemoComponent extends React.Component {    render() {        return (            <Component Stuff />        )    }}export default compose(    withHoCOne,    withHoCTwo)(DemoComponent)如果运行此代码，则会在控制台中引发错误，提示：警告：Material-UI：提供给classes属性的键'HoCOneStyle'在HoCTwo中未实现。您只能覆盖以下之一：HoCTwoStyle。如何避免引发此错误？它实际上并没有停止任何工作，我只是不想在控制台中出现错误。

Answer 1

您只需要避免将classes属性从HoCOne传递到HoCTwo。当您将classes属性包含在也正在使用的某些属性上时，withStyles它将触发Material-UI的mergeClasses功能。

您应该可以使用以下类似的方法解决此问题：

render() {

  const {classes, ...otherProps} = this.props;

  return <><HoC className={classes.HoCOneStyle} /><WrappedComponent

        {...otherProps}

        /></>;

}