Utiliser material-ui avec redux?

je suis actuellement rendu principale composante de cette façon: 

 ReactDOM.render(
      <Provider store = {store}>
        {getRoutes(checkAuth)}
      </Provider>,
      document.getElementById('app')
    )

l'état docs d'utiliser MuiThemeProvider pour envelopper mon composant app. Je suis déjà en utilisant Provider to wrap, toutes les suggestions quant à la façon d'utiliser material-ui INA redux app. J'essaie d'ajouter material-ui dans un champ redux-form comme suit:

import React, { PropTypes } from 'react'
import {default as ReactModal} from 'react-modal'
import {Field, reduxForm} from 'redux-form'
import {TextField} from 'material-ui'

const customStyles = {
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.55)'
  },
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)'
  }
}

const modalForm = (props) => {
  // console.log(props)
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <div>
      <button onClick= {props.openModal}>Duck</button>
      <ReactModal
      isOpen={props.isOpen}
      style={customStyles}
      onRequestClose={props.closeModal}>

  <h1>Compose New Duck</h1>
  <form onSubmit= {handleSubmit}>
  <label>duck</label>
    <Field name ='duck' component = {(duck) =>
      <TextField hintText = 'Enter Duck'
        floatingLabelText = 'Enter Duck here'
        {...duck} />} />

  </form>
  <button onClick= {props.closeModal}>Close Modal...</button>
</ReactModal>
    </div>
  )
}

export default reduxForm({
  form: 'duckModal'  // a unique identifier for this form
})(modalForm)
17
demandé sur jasan 2016-06-22 05:13:10

4 réponses

essayé les suivants et cela a fonctionné:

 const App = () => (
    <MuiThemeProvider>
      <Provider store = {store}>
        {getRoutes(checkAuth)}
      </Provider>
    </MuiThemeProvider>
    )

  ReactDOM.render(
    <App/>,
  document.getElementById('app')
)
14
répondu jasan 2016-06-22 02:18:26

je vous invite à consulter cet exemple.

7
répondu Erik R. 2016-09-05 14:25:08 
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import store from './store'; // wherever your store file is located
import theme from './theme'; // wherever your theme file is located
import Routes from './routes';

const App = () => (
  <Provider store={store}>
    <MuiThemeProvider theme={theme}>
     <Routes />
    </MuiThemeProvider>
  </Provider>
);

render(<App />, document.getElementById('app'));

en ce qui concerne les composants eux-mêmes, si vous utilisez withStyles, vous pourriez avoir besoin de faire quelque chose comme ceci: 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

const styles = theme => ({
  root: {
    color: '#000',
  }
});

class SampleComponent extends Component {
  render() {
    const { classes, sample } = this.props;
    return <div className={classes.root}>{ sample }</div>;
  }
}

SampleComponent.defaultProps = {
  sample: 'Hello world',
};

SampleComponent.propTypes = {
  classes: PropTypes.object.isRequired,
  sample: PropTypes.string.isRequired,
};

// This with connect is where the component is actually subscribing to the state
const select = state => ({
  sample: state.sample,
});

export default connect(select)(withStyles(styles)(SampleComponent));
0
répondu Ross Sheppard 2018-10-05 18:20:17

essayé les suivants et cela a fonctionné:

 const App = () => (
  <Provider store = {store}>
    <MuiThemeProvider>
      {getRoutes(checkAuth)}
    </MuiThemeProvider>
  </Provider>
)
-1
répondu Jin Yin 2017-11-28 02:26:56