我目前正在以这种方式呈现主要组件:
ReactDOM.render(
<Provider store = {store}>
{getRoutes(checkAuth)}
</Provider>,
document.getElementById('app')
)
文档声明使用MuiThemeProvider来包装我的app组件 . 我是alrady使用Provider来包装,关于如何使用material-ui ina redux app的任何建议 . 我想在redux-form字段中添加material-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)
4 回答
我会把你推荐给this example .
尝试以下并且它有效:
至于组件本身,如果你使用withStyles,你可能需要做这样的事情:
尝试以下并且它有效: