CODEWITHSUNDEEP
reactjsmigrationmaterial-ui
haxpanel
haxpanel

Reputation: 4678

I'm getting error after upgrading to Material UI 4 - withStyles

I'm getting the following error after upgrading to MUI v4.0.2 from v3.9.x:

You must pass a component to the function returned by connect. Instead received {"propTypes":{},"displayName":"WithStyles(MyComponent)","options":{"defaultTheme":{"breakpoints":{"keys":["xs","sm","md","lg","xl"],"values": ...

MyComponent:

import { withStyles } from '@material-ui/core/styles'

const getStyles = theme => ({
  fooBar: {
    ...
  },
})

...
export default withStyles(getStyles)(MyComponent)

MyContainer:

import { connect } from 'react-redux'
import MyComponent from './MyComponent'
...
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

How to migrate withStyles?

Upvotes: 6

Views: 2614

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 81016

Version 5.0.7 and earlier of react-redux performed the following validation on the component passed to connect:

https://github.com/reduxjs/react-redux/blob/v5.0.7/src/components/connectAdvanced.js#L91

    invariant(
      typeof WrappedComponent == 'function',
      `You must pass a component to the function returned by ` +
      `${methodName}. Instead received ${JSON.stringify(WrappedComponent)}`
    )

With the introduction of React.forwardRef (which is used heavily in Material-UI v4) and other features introduced in React 16.8 (hooks), it is possible to have a component type that is not a function.

More recent versions of react-redux instead use isValidElementType from the react-is package. This correctly recognizes the component types returned by forwardRef and other methods.

I believe versions 5.1 and later of react-redux should all work fine without erroneously causing the error mentioned in the question.

Upvotes: 8

M. Dillon
M. Dillon

Reputation: 15

This is how I do it:

import { withStyles } from '@material-ui/core/styles';

Define your styles object: look at the material-ui examples for guidance

const styles => ({
  root: {
    display: 'flex',
  }
});

Then export the component using your styles:

export default withStyles(styles)(YourComponent);

Upvotes: -2

Related Questions