【React】Material-UI、Material-Icons使い方メモ

最近Reactを楽しんでいます。
今回はReactで使える便利なライブラリ、「Material-UI」「Material-Icons」 の使い方を自分用にメモしておきます。

Material-UI

インストール

基本的に公式サイトを見ればOKなんですが、一応メモします。

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

or

yarn add @mui/material @emotion/react @emotion/styled

2022/05/29時点では、v5.8.1がインストールされました。

シンプルなボタンを設置する

import Button from '@mui/material/Button'; // Button UIをインストール

const TheButton = () => {
  return (
    <div>
      <Button>ボタン</Button>
    </div>
  );
}

Reactのコンポーネントと同じ書き方が出来るのでとても使いやすいです。

ボタンの見た目を変える

現状、ボタンらしさが足りないので、別バージョンを指定して見た目を変えます。

<Button variant="contained">ボタン</Button>

variantにcontainedを指定して、背景色のありのボタン作りました。

ボタンの見た目変更も簡単にできます。

さらに詳しい設定は公式ページを確認しましょう。
公式のButtonページ

Material-Iconsを使ってアイコンを表示

続いて、アイコン付きのUI使いたい場合、「Material-Icons」を使います。

インストール

こちらから確認。

npm install @mui/icons-material

or

yarn add @mui/icons-material

アイコンを選ぶ

まずは公式サイトから使いたいアイコンを選択します。

サイドのFilledなどの選択でアイコンのスタイルを変えることもできます。

• Filled・・・色が塗りつぶした
• Outlined・・・アイコンが白抜きになる
• Rounded・・・アイコンの角が丸くなる。アイコンによっては形が変わる
• Two tone・・・アイコンの白抜き部分に色がつく
• Sharp・・・角が尖ったアイコンになる

またアイコンによっては変化しないものもありますね。

アイコンを選択するとimportする為のコードが表示されるのでcopyしましょう。

アイコン付きボタンに変更

import Button from '@mui/material/Button';
// アイコンインポート
import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';

const TheButton = () => {
  return (
    <div>
      <Button variant="contained">
        {/* アイコンを子要素に入れる */}
        <AccessAlarmIcon />
        ボタン
      </Button>
    </div>
  );
}
export default TheButton;

Buttonの中に入れ子にするだけで簡単にアイコン付きボタンが出来ました！

CSSで微調整

ちょっとアイコンとテキストが近いのでCSSで調整します。

<Button variant="contained">
  <AccessAlarmIcon style={{marginRight: 8}}/>
  ボタン
</Button>

余白を付けていい感じになりました。

以上、「Material-UI」「Material-Icons」の基本的な使い方でした。

参考