Material-UI withStyles与redux-form结合报错，求解决方案

看起来你遇到的这个TypeError: Object(...) is not a function错误，主要是两个原因导致的：withStyles的导入路径不正确，以及高阶组件(HOC)的包裹顺序出错。我来一步步帮你解决：

1. 修正withStyles的导入路径 #

你当前导入withStyles的方式是：

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

这是错误的，在Material-UI v4（withStyles主要用于这个版本）中，withStyles是从@material-ui/core/styles模块导出的，正确的导入应该是：

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

如果导入路径错误，会导致你拿到的withStyles不是一个可调用的函数，直接触发类型错误。

2. 调整高阶组件的包裹顺序 #

多个HOC包裹组件时，顺序非常关键——每个HOC都会处理前一个HOC返回的组件，顺序错了可能导致props传递异常或者类型不匹配。

针对你的场景，正确的包裹顺序应该是：

• 最内层：用reduxForm处理表单逻辑
• 中间层：用connect连接Redux store
• 最外层：用withStyles注入样式

你可以用两种方式实现：

方式一：链式调用 #

直接嵌套调用HOC，逻辑清晰：

// 先定义你的FormComponent、styles、mapStateToProps、mapDispatchToProps...

export default withStyles(styles)(
  connect(mapStateToProps, mapDispatchToProps)(
    reduxForm({ form: 'myForm' })(FormComponent)
  )
);

方式二：用redux的compose函数组合 #

如果HOC较多，用compose可以避免深层嵌套，让代码更整洁：

import { compose } from 'redux'; // 从redux导入compose

// ...其他定义

const EnhancedForm = compose(
  withStyles(styles),
  connect(mapStateToProps, mapDispatchToProps),
  reduxForm({ form: 'myForm' })
)(FormComponent);

export default EnhancedForm;

注意：compose是从右到左执行的，所以上面的代码等价于withStyles(styles)(connect(...)(reduxForm(...)(FormComponent)))，和链式调用的顺序一致。

验证修改 #

做完这两步修改后，你的组件应该能正常接收样式props（比如classes），同时Redux和表单逻辑也能正常工作，不会再触发TypeError了。

如果还是有问题，可以检查一下：

• Material-UI和redux-form、react-redux的版本是否兼容（比如redux-form需要和你的React版本匹配）
• 确保styles函数返回的是合法的样式对象（即使是空对象也没问题，但语法要正确）

内容的提问来源于stack exchange，提问作者Chicko