Используя материал-ui с редукцией?
В настоящее время я выделяю основной компонент следующим образом:
ReactDOM.render(
<Provider store = {store}>
{getRoutes(checkAuth)}
</Provider>,
document.getElementById('app')
)
состояние docs позволяет использовать MuiThemeProvider для переноса моего компонента приложения. Я обманываю, используя Провайдера для обертывания, любые предложения о том, как использовать приложение material-ui ina redux. Я пытаюсь добавить материал-ui в поле формы редукции, как показано ниже:
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)
Ответы
Ответ 1
Пробовал следующее и работал:
const App = () => (
<MuiThemeProvider>
<Provider store = {store}>
{getRoutes(checkAuth)}
</Provider>
</MuiThemeProvider>
)
ReactDOM.render(
<App/>,
document.getElementById('app')
)
Ответ 2
Я бы назвал вас этот пример.
Ответ 3
Пробовал следующее и работал:
const App = () => (
<Provider store = {store}>
<MuiThemeProvider>
{getRoutes(checkAuth)}
</MuiThemeProvider>
</Provider>
)