升级到 Material UI 4 后出现错误 - withStyles

IT技术 reactjs migration material-ui
2021-05-09 21:26:24

从 v3.9.x 升级到 MUI v4.0.2 后，我收到以下错误：

您必须将一个组件传递给 connect 返回的函数。而是收到 {"propTypes":{},"displayName":"WithStyles(MyComponent)","options":{"defaultTheme":{"breakpoints":{"keys":["xs","sm"," md","lg","xl"],"values": ...

我的组件：

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

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

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

我的容器：

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

如何迁移withStyles？

2个回答

react-redux 的 5.0.7 及更早版本对传递给 的组件执行了以下验证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)}`
    )

通过引入React.forwardRef（在 Material-UI v4 中大量使用）和 React 16.8（钩子）中引入的其他特性，可以有一个不是函数的组件类型。

最近的版本做出react，终极版改用isValidElementType从react-is包。这可以正确识别forwardRef和其他方法返回的组件类型。

我相信 react-redux 的 5.1 及更高版本应该都可以正常工作，而不会错误地导致问题中提到的错误。

这就是我的做法：

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

定义您的样式对象：查看 material-ui 示例以获取指导

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

然后使用您的样式导出组件：

export default withStyles(styles)(YourComponent);
其它你可能感兴趣的问题
上一篇Firebase 默认托管域：只有 .firebaseapp.com 有效，但 .web.app 失败 下一篇Ender 3 v2 间歇性问题 - 清晰可见的图层