Why I can't apply redux's connect with material-ui withStyles?

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(
  connect(mapStateToProps, mapDispatchToProps)(App)

//if i do:

export default connect(mapStateToProps,mapDispatchToProps)(App)


export default withStyles(styles)(App)

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


  • 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))