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