在多个样式的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() {&nbsp; const {classes, ...otherProps} = this.props;&nbsp; return <><HoC className={classes.HoCOneStyle} /><WrappedComponent&nbsp; &nbsp; &nbsp; &nbsp; {...otherProps}&nbsp; &nbsp; &nbsp; &nbsp; /></>;}