Estoy atascado en la exportación de estilos de material-ui con conector redux. Aquí está mi código:
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 thisHe intentado:
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)".¿Alguna solución?
solo prueba esto
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(App));Donde App es tu componente. Funciona bien para mí.
Eche un vistazo a cómo se maneja en el sitio de documentos de material-ui, específicamente en el componente AppFrame :
export default compose( withStyles(styles, { name: 'AppFrame', }), withWidth(), connect(), )(AppFrame);Están usando recomponer para hacer esto.
Entonces, en tu caso, sería:
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);Sin recompose o compose :
Cart = withStyles(styles, {name: 'Cart'})(Cart); export default reduxConnector(Cart);