MUIとは
MUIはGoogleが開発したReactのUIライブラリ&コンポーネント集です。いい感じの見た目の部品（ボタンやテキストフィールドなど）を事前に用意してくれています。CSSを考えなくてもある程度はいい感じのデザインにしてくれます。
インストール
ということでまずはインストールします。
(ctrl + Cで開発用サーバを止めておいてください)
$ npm i @mui/material @mui/icons-material @mui/styles @emotion/react @emotion/styled
でインストールします。
各パッケージの説明
準備中...
使い方のイメージ
特に難しいことはありません。次のように使用します。
- インポートする
import 〇〇 from '@mui/material/〇〇';
- JSXとしてつかう
<〇〇>
いろいろかく
</〇〇>
また
どのようなコンポーネントがあるかは公式ドキュメントのサイドバー（横）のComponentsを、
それぞれのコンポーネントのpropsなどを知りたいときは公式ドキュメントのサイドバー（横）のComponent APIを、参照するといいでしょう。
よく使う汎用コンポーネントをつくる
ここではよく使うコンポーネントをいくつかプロジェクトルート/src/components/utilに定義しておきましょう。
- Button.tsx
- Checkbox.tsx
- TextField.tsx
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コンポーネントを呼び出します。
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"を渡してみてください。
<MUIButton variant="outlined"> //←propsを追加
{children}
</MUIButton>
MUIのpropsを渡せるように
いまはButtonコンポーネントにはchildren propsしか渡せません。MUIButtonコンポーネントにはvariantのほかにも様々なpropsを渡すことができます。その一覧は次のように受け取ることができます。
import {ButtonProps as MUIButtonProps} from "@mui/material/Button" ;
//MUIButtonPropsを使用可能
Buttons.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
続いてチェックボックスを作成していきます。
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とは入力欄のことです。キーボードなどで文字列を入力できます。
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に作ったコンポーネントたちを配置してみてみましょう。
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;
