为什么我不能将redux的connect与material-ui withStyles配合使用？

Question

I'm trying to add withStyles() hook from material-ui in the redux container-component with connect() function via { compose } function from 'recompose' and get this error from recompose package:

TypeError: Function.prototype.apply was called on #, which is a object and not a function

I ask for any help, I have already spent too much time on this

import { withStyles } from '@material-ui/core/styles';
import { styles } from './styles';
import { compose } from 'recompose';
import { connect } from 'react-redux';

...

function mapStateToProps(state) {
  return {
    someVal: state.someVal,
  }
}

function mapDispatchToProps(dispatch) {
  return ({
    changeVal: () => {dispatch('CHANGE_VAL')}
  })
}

export default compose(
  withStyles(styles),
  connect(mapStateToProps, mapDispatchToProps)(App)
);


//if i do:

export default connect(mapStateToProps,mapDispatchToProps)(App)

//or:

export default withStyles(styles)(App)

//it's work. (just to clarify)

Answer 1

connect and withStyles are both HOC

a higher-order component is a function that takes a component and returns a new component.

So you need to wrap App inside withStyles and connect

export default connect(mapStateToProps,mapDispatchToProps)(withStyles(styles)(App))