私は現在このようにメインコンポーネントをレンダリングしています:
ReactDOM.render(
<Provider store = {store}>
{getRoutes(checkAuth)}
</Provider>,
document.getElementById('app')
)
muiThemeProviderを使用してアプリコンポーネントをラップするドキュメントの状態。私はプロバイダーをラップに使用して、reduアプリでmaterial-uiを使用する方法についての提案をすでに使用しています。以下のようにreduxフォームフィールドに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)
以下を試してみましたが、うまくいきました:
const App = () => (
<MuiThemeProvider>
<Provider store = {store}>
{getRoutes(checkAuth)}
</Provider>
</MuiThemeProvider>
)
ReactDOM.render(
<App/>,
document.getElementById('app')
)
この例 を参照します。
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'));
コンポーネント自体については、withStylesを使用している場合は、次のようにする必要があります。
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));