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         


        

Answer 1

Take a look at how it's being handled in the material-ui docs site, specifically in the AppFrame component:

export default compose(
  withStyles(styles, {
    name: 'AppFrame',
  }),
  withWidth(),
  connect(),
)(AppFrame);

They're using recompose to do this.

So in your case, it would be:

import React, { Component } from 'react';
import compose from 'recompose/compose';
import { connect } from 'react-redux';
import Drawer from 'material-ui/Drawer';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';

const styles = theme => {
  console.log(theme);
  return {
    paper: {
      top: '80px',
      boxShadow: theme.shadows[9],
    },
  };
};

const Cart = ({ classes }) =>
  
    
cart
  ;

const mapStateToProps = state => ({});

export default compose(
  withStyles(styles, { name: 'Cart' }),
  connect(mapStateToProps, null)
)(Cart);