★前回の記事
タスク一覧にスタイルを適用する
前回と同様にタスク一覧にもスタイルを適用します。Paperの周りにマージンを設定し、Paperの中に余白を設定します。
src/components/todos/index.js
import { compose } from 'redux' // 追加 import { withStyles } from '@material-ui/core/styles' // 追加 // stylesを追加 const styles = theme => ({ todoListRoot: { padding: theme.spacing.unit * 3, }, todoListContent: { maxWidth: 950, padding: theme.spacing.unit * 3, marginLeft : 'auto', marginRight : 'auto', }, }) class TodoComponent extends React.Component { // 略 render() { const {isOwnTodos, match: { params: {uid}}, classes} = this.props; // classesを追加 return ( <div className={classes.todoListRoot}> {/* classNameを追加 */} <Paper className={classes.todoListContent}> {/* classNameを追加 */} {/* 略 */} </Paper> </div> ) } } TodoComponent.propTypes = { // 略 classes: PropTypes.object.isRequired, // 追加 } // composeを使用してwithStylesとconnectを合成するように変更 export default compose( withStyles(styles), connect( mapStateToProps, mapDispatchToProps ))(TodoComponent)
実行結果です。Paperとナビボタンとの間が空きました。Paperの幅が最大950pxに制限され、左右均等に余白ができました。Paperの内部にも余白ができています。
続いて読み込み中のぐるぐるとタスクなしの文言の周りにも余白を追加します。
src/components/todos/TodoList.js
import { withStyles } from '@material-ui/core/styles' // 追加 // stylesを追加 const styles = theme => ({ message: { marginTop: theme.spacing.unit * 2, marginBottom: theme.spacing.unit * 2, }, }) const TodoList = ({displayName, todos, isOwnTodos, onTodoClick, classes}) => { // classesを追加 if (!isLoaded(todos)) { return <CircularProgress className={classes.message} /> // classNameを追加 } if (isEmpty(todos)) { return <Typography variant="body1" className={classes.message}>タスクがありません。</Typography> // classNameを追加 } // 略 } TodoList.propTypes = { // 略 classes: PropTypes.object.isRequired, // 追加 } export default withStyles(styles)(TodoList) // 変更
実行結果です。ぐるぐるとタスクなしの文言の周りに余白が追加されました。
以上でwithStylesを使用してタスク一覧にスタイルを適用することができました。
参考
★次回の記事
★目次