Material-UIのPaperを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

Material-UIのPaperを使用し、コンテンツが紙の上に載っているようなUIにします。最新の更新一覧とタスク一覧をPaperの上に載せます。

f:id:yucatio:20190428221857p:plain

最新の更新一覧でPaperを使う

最新の更新をPaperで囲みます。<div>を<Paper>に変更します。

src/components/dashboard/recentUpdatedTodos/index.js({/* xxx */}のコメントは実行前に削除してください)

import Paper from '@material-ui/core/Paper'  // 追加

let RecentUpdatedTodos = ({todos}) => {
  return (
    <Paper>  {/* 変更 */}
      <Typography variant="h5">最近の更新</Typography>
      {RecentUpdatedList(todos)}
    </Paper>  {/* 変更 */}
  )
}

実行結果です。白い背景になりました。次回でマージンを入れると背景から浮いた感じがわかるようになります。

f:id:yucatio:20181203125706p:plain

タスク一覧でPaperを使う

タスク一覧をPaperで囲みます。今後の実装のため、ルート要素の<div>は残しておいて、その下に<Paper>コンポーネントを挿入します。

src/components/todos/index.js

import Paper from '@material-ui/core/Paper'  // 追加

class TodoComponent extends React.Component {
    // 略
    render() {
    const {isOwnTodos, match: { params: {uid}}} = this.props;
    return (
      <div>
        <Paper>  {/* 追加 */}
          <Title isOwnTodos={isOwnTodos} uid={uid} />
          {isOwnTodos && <AddTodo uid={uid} />}
          <Notice />
          <VisibleTodoList uid={uid} isOwnTodos={isOwnTodos} />
          <Footer />
        </Paper>  {/* 追加 */}
      </div>
    )
  }
}