CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Exitialis
Exitialis

Reputation: 411

Material UI withStyles on multiple styled HoCs

My application uses HoCs for its modals and I use withStyles to style them, when I apply multiple HoCs to one component however the classes prop of the first HoC is passed to the next in the compose of the component.

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

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

Example component:

class DemoComponent extends React.Component {
    render() {
        return (
            <Component Stuff />
        )
    }
}

export default compose(
    withHoCOne,
    withHoCTwo
)(DemoComponent)

If run this code would throw an error in the console saying:

Warning: Material-UI: the key 'HoCOneStyle' provided to the classes property is not implemented in HoCTwo. You can only override one of the following: HoCTwoStyle.

How do I avoid throwing this error? It doesn't actually stop anything from working I just don't want errors in my console.

Upvotes: 1

Views: 1223

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80976

You just need to avoid passing the classes property from HoCOne into HoCTwo. When you include the classes property on something that is also using withStyles it triggers Material-UI's mergeClasses functionality.

You should be able to solve this with something like the following:

render() {
  const {classes, ...otherProps} = this.props;
  return <><HoC className={classes.HoCOneStyle} /><WrappedComponent
        {...otherProps}
        /></>;
}

Upvotes: 3

Related Questions