reactjs - selectfield - react ui

¿Usando material-ui con redux?

Question

Actualmente estoy renderizando el componente principal de esta manera:

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

los documentos indican el uso de MuiThemeProvider para envolver el componente de mi aplicación. Estoy utilizando a Provider para envolver, cualquier sugerencia sobre cómo usar material-ui en una aplicación de redux. Estoy tratando de agregar material-ui en un campo de forma redux como se muestra a continuación:

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)

Answer 1

Me gustaría referirte a este ejemplo .

Answer 2

Probé lo siguiente y funcionó:

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

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

Answer 3

Probé lo siguiente y funcionó:

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

Answer 4

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 cuanto a los componentes en sí, si está utilizando withStyles, es posible que deba hacer algo como esto:

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));