React Material UI - Export multiple higher order components
Just try this
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(App));
Where App is your component. It works fine for me.
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 }) =>
<Drawer open docked anchor="right" classes={{ paper: classes.paper }}>
<p style={{ width: 250 }}>cart</p>
</Drawer>;
const mapStateToProps = state => ({});
export default compose(
withStyles(styles, { name: 'Cart' }),
connect(mapStateToProps, null)
)(Cart);
Without recompose
or compose
:
Cart = withStyles(styles, {name: 'Cart'})(Cart);
export default reduxConnector(Cart);