Material-UIのパッケージのインストールと設定(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

Material-UIを使用するのに必要なパッケージのインストールと設定を行います。

パッケージのインストール

Installation - Material-UI を参考に進めていきます。

@material-ui/coreのインストール

Material-UIの中心となるパッケージをインストールします。

yarn add @material-ui/core

@material-ui/iconsのインストール

Material-UIのアイコン用のパッケージをインストールします。アイコンはFontアイコンとSVGアイコンの2種類あります。

Font vs SVG. Which approach to use?

Both approaches work fine, however, there are some subtle differences, especially in terms of performance and rendering quality. Whenever possible SVG is preferred as it allows code splitting, supports more icons, renders faster and better.

https://material-ui.com/style/icons/#font-vs-svg--which-approach-to-use-

(訳)

フォントアイコンとSVGアイコンどちらを使うべきか?

どちらでも動作しますが、両者には表示速度と表示の綺麗さに微妙な違いがあります。できる限りSVGアイコンを使用してください。SVGアイコンの方がコードの分割ができ、アイコンの種類も多く、表示も早く、綺麗なためです。

(訳ここまで)

SVGアイコンをインストールします。

yarn add @material-ui/icons

フォントの設定

Material-UI用のフォントを設定します。

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 中略 -->
    <!-- cssを追加 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
  </head>
  <!-- 後略 -->

CssBaselineの設定

CssBaselineを追加します。この設定を追加することで、ブラウザが違っても表示を統一させることができます。 また、ページのマージンがなくなり、背景色がtheme.palette.background.defaultで指定した色(デフォルトだと薄いグレー)になります。

src/components/App.js

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

const App = () => (
  <BrowserRouter>
    <div>
      <CssBaseline />   {/* 追加 */}
      <Login />
      {/* 中略 */}
    </div>
  </BrowserRouter>
)

実行結果です。

CssBaseline導入前↓

f:id:yucatio:20181129223146p:plain

CssBaseline導入後↓

f:id:yucatio:20181129223201p:plain

以上でMaterial-UIを使用するのに必要なパッケージのインストールと設定が完了しました。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com