React Material UI - Export multiple higher order components

Question

I'm stuck on exporting material-ui styles with redux connector. Here is my code:

import React, { Component } from 'react'; import { connect } from 'react-redux'; import Drawer from 'material-ui/Drawer'; import { withStyles } from 'material-ui/styles'; import PropTypes from 'prop-types';  const mapStateToProps = state => ({});  const reduxConnector = connect(mapStateToProps, null); const styles = theme => {     console.log(theme);     return ({         paper: {             top: '80px',             boxShadow: theme.shadows[9]         },     }); };  class Cart extends Component {      render() {         const { classes } = this.props;         return (             <Drawer                 open                 docked                 anchor="right"                 classes={{ paper: classes.paper }}             >                 <p style={{ width: 250 }}>cart</p>              </Drawer>         );     } }  export default withStyles(styles, {name: 'Cart'})(Cart); export default reduxConnector(Cart); // I want to add this 

I've tried:

export default reduxConnector(withStyles(styles))(Cart); // return Uncaught TypeError: Cannot call a class as a function  export default withStyles(styles, {name: 'Cart'})(reduxConnector(Cart)); // return Uncaught Error: Could not find "store" in either the context or props of "Connect(Cart)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Cart)". 

Any solution?

Answer 1

Just try this

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

Where App is your component. It works fine for me.