Chapter 05

第4章 MUIをさわっておく

てべすてん
てべすてん
2022.03.11に更新

MUIとは

MUIはGoogleが開発したReactのUIライブラリ&コンポーネント集です。いい感じの見た目の部品(ボタンやテキストフィールドなど)を事前に用意してくれています。CSSを考えなくてもある程度はいい感じのデザインにしてくれます。

公式ドキュメントはこちら

インストール

ということでまずはインストールします。

(ctrl + Cで開発用サーバを止めておいてください)

$ npm i @mui/material @mui/icons-material @mui/styles @emotion/react @emotion/styled 

でインストールします。

各パッケージの説明

準備中...

使い方のイメージ

特に難しいことはありません。次のように使用します。

  1. インポートする
インポート
import 〇〇 from '@mui/material/〇〇';
  1. JSXとしてつかう
使用
<〇〇>
  いろいろかく
</〇〇>

また

どのようなコンポーネントがあるかは公式ドキュメントのサイドバー(横)のComponentsを、

それぞれのコンポーネントのpropsなどを知りたいときは公式ドキュメントのサイドバー(横)のComponent APIを、参照するといいでしょう。

よく使う汎用コンポーネントをつくる

ここではよく使うコンポーネントをいくつかプロジェクトルート/src/components/utilに定義しておきましょう。

  • Button.tsx
  • Checkbox.tsx
  • TextField.tsx

Button.tsx

ひな形

プロジェクトルート/src/components/util/Button.tsx
import {FC} from "react" ; 
import MUIButton from "@mui/material/Button" ;

export type ButtonProps = {
} ;

const Button :FC<ButtonProps> = ({children})=>{
  return (
    <MUIButton>
      {children}
    </MUIButton>
  )
} 
export default Button ;


children propsについて

children propsは特別なpropsでJSXで囲われた子要素を受け取ります。
たとえば上の例ではButtonコンポーネントを

<Button> push this button ! </Button>

と呼ばれた場合、children props には " push this button ! "が渡されます。

作ったButtonコンポーネントを呼び出してみましょう。

App.tsxでButtonコンポーネントを呼び出します。

プロジェクトルート/src/App.tsx
import Button from 'components/util/Button';  //←ここを追加
import React, { FC } from 'react';

interface AppProps{}
const App :FC<AppProps> = ()=>{
  return (
    <div>
      flowchart builder !

      <Button>aaa</Button>  //←ここを追加
      
    </div>
  ) ;
};

export default App;

保存して、ローカルサーバを起動して確認してください。

$ npm start

ボタンの種類を変えてみる

MUIではvariant propsに決められた文字列を指定することでコンポーネントの種類を指定できます。MUIButtonコンポーネントのvariant propsに"outlined"を渡してみてください。

プロジェクトルート/src/components/util/Button.tsx
<MUIButton variant="outlined">  //←propsを追加
  {children}
</MUIButton>

MUIのpropsを渡せるように

いまはButtonコンポーネントにはchildren propsしか渡せません。MUIButtonコンポーネントにはvariantのほかにも様々なpropsを渡すことができます。その一覧は次のように受け取ることができます。

MUIButtonのpropsをMUIButtonPropsとして受け取る
import {ButtonProps as MUIButtonProps} from "@mui/material/Button" ;
//MUIButtonPropsを使用可能

Buttons.tsxを変更しましょう!

プロジェクトルート/src/components/util/Button.tsx
import { FC } from "react";
import MUIButton, { ButtonProps as MUIButtonProps } from "@mui/material/Button";

export type ButtonProps = {
} & MUIButtonProps;

const Button: FC<ButtonProps> = (props) => {
    const {
        children,
        ...muiProps
    } = props;
    return (
        <MUIButton variant="outlined" {...muiProps}>
            {children}
        </MUIButton>
    );
};
export default Button;

Checkbox.tsx

続いてチェックボックスを作成していきます。

プロジェクトルート/src/components/util/Checkbox.tsx
import { FC } from "react";
import MUICheckbox, { CheckboxProps as MUICheckboxProps } from "@mui/material/Checkbox";

export type CheckboxProps = {
} & MUICheckboxProps;

const Checkbox: FC<CheckboxProps> = (props) => {
    const {
        ...muiProps
    } = props;
    return (
        <MUICheckbox {...muiProps}>
        </MUICheckbox>
    );
};
export default Checkbox;

TextField.tsx

TextFieldとは入力欄のことです。キーボードなどで文字列を入力できます。

プロジェクトルート/src/components/util/TextField.tsx
import { FC } from "react";
import MUITextField, { TextFieldProps as MUITextFieldProps } from "@mui/material/TextField";

export type TextFieldProps = {
} & MUITextFieldProps;

const TextField: FC<TextFieldProps> = (props) => {
    const {
        ...muiProps
    } = props;
    return (
        <MUITextField {...muiProps}>
        </MUITextField>
    );
};
export default TextField;

確認

各コンポーネントが作成できたか確認するためにApp.tsxに作ったコンポーネントたちを配置してみてみましょう。

プロジェクトルート/src/App.tsx
import Button from 'components/util/Button';  //←追加
import Checkbox from 'components/util/Checkbox';  //←追加
import TextField from 'components/util/TextField';  //←追加
import React, { FC } from 'react';

interface AppProps{}
const App :FC<AppProps> = ()=>{
  return (
    <div>
      flowchart builder !

      <Button>aaa</Button>  {/* ←追加 */}
      <Checkbox/>  {/* ←追加 */}
      <TextField/>  {/* ←追加 */}
    </div>
  ) ;
};

export default App;

質問・指摘などはこちらから

https://zenn.dev/tbsten/scraps/7123b1257c2097