React: Material-UI (MUI) のインストールと始め方

スポンサーリンク

React で Material-UI を使う設定方法を記します。記事の最後にはサンプルも用意しています。

Material-UI とは

Material-UI は、React 向けの UI コンポーネントライブラリです。Material Design をベースにした UI コンポーネント群が提供されています。その他にも、テーマやレイアウトシステムなどの、UI 開発に便利な仕組みも提供しています。

React アプリケーションの作成

まずは、React アプリケーションを作成します。TypeScript で開発をすることを前提とするため、template オプションに “typescript” を指定しています。

npx create-react-app@latest my-app --template=typescript

※ npx が認識されずにコマンドがエラーになる場合、Node.js のインストールが必要です。Node.js のインストールはこちらに手順がありますので参照ください。

Material-UI のインストール

アプリケーションのルートディレクトリ(フォルダ)で、次のコマンドを実行します。

npm install @mui/material @emotion/react @emotion/styled

続いて、public\index.html に次のコードを追加します。

<!-- Roboto font -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

<!-- Font icons -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

Material-UI Button の利用

では、Material-UI で提供されている Button コンポーネントを利用してみましょう。App.tsx 4 行目で、”@mui/materil” から Button をインポートして利用します。

また、App.tsx 3 行目にあるスタイルのインポートをコメントアウトしていることと、header タグ内の記述は Button 以外は削除します。

import React from 'react';
import logo from './logo.svg';
// import './App.css'; <-- コメントアウト
import { Button } from "@mui/material";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Button variant="outlined">Material-UI ボタン</Button>
      </header>
    </div>
  );
}

export default App;

実行結果

ターミナルから npm start を実行し、アプリケーションを起動します。

Button コンポーネントが表示されていることが分かります。

サンプルアプリケーション

今回の Material UI (MUI) Button コンポーネントを組み込んだサンプルです。

Visual Studio Code などの IDE で開いたのち、「npm install」→「npm start」と実行すると、上記のようにアプリケーションが実行できます。

参考情報

React MUI を利用する、各種実装例を紹介しています。実行可能サンプルも用意していますので、まず手元で動かして動作を確認したい方にもおすすめです。

コメント

タイトルとURLをコピーしました