React: Material-UI のインストール

スポンサーリンク

React で Material-UI を使う設定方法を記します。

Material-UI とは

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

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

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

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

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 コンポーネントを利用してみましょう。”@mui/materil” から 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>
        <img src={logo} className="App-logo" alt="logo" />
        ...(省略)...
      </header>
    </div>
  );
}

export default App;

実行結果

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

コメント

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