withStylesによるスタイルの適用(タスク一覧編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

タスク一覧にスタイルを適用する

前回と同様にタスク一覧にもスタイルを適用します。Paperの周りにマージンを設定し、Paperの中に余白を設定します。

f:id:yucatio:20190428222832p:plain

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の内部にも余白ができています。

f:id:yucatio:20181206165029p:plain

続いて読み込み中のぐるぐるとタスクなしの文言の周りにも余白を追加します。

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)  // 変更