👻

MUIの使い方備忘録

2023/02/05に公開

React

mui

tech

MUIとは

https://mui.com/
個人的な所感ですがBootstrapに代表されるようなUI生成ライブラリの分類だと思っているが比較的簡単で何よりかっこいい
職場の方より実装に利用するので覚えておいてと言われた為、練習がてら触り始めてみましたがとても便利だと実感しています

他ライブラリと比較

trends
そもそも他のライブラリをあまり知らなかったので検索してみた結果の中で有名そうな所を並べて比較してみました。ほかと比較してもMUIの人気が伺えます

Library	Github	Star☆
MUI	Link	84.4k
ant-design	Link	84.2k
react-bootstrap	Link	21.5k
Semantic-UI-React	Link	13k
evergreen	Link	12k
rebass	Link	7.9k

インストール

最低限必要なコマンド

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

アイコンを使う場合は下記も実行必要

npm install @mui/icons-material

Tabs等の要素も入れる場合は下記も実行必要

npm install @mui/lab

labはコアパッケージに組み込まれていない機能群見たいですね
利用率の低さや将来的な変更の可能性からコアパッケージに移行していないそうです

まとめると

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/lab

とりあえずお試しする場合はこれでよいと思っています

実際に使ってみる

ボタンを生成する際は下記のようにする

import { Button } from "@mui/material"
export const Makebutton = () => {
    return (
        <Button>text</Button>
    )
}

デフォルト仕様：背景透過、押下時波及アニメーション、大文字
basicbutton

また下記のようにボタンのvariant属性に適応する文字列を渡すことでボタンのUIを変更することが可能です

import { Button } from "@mui/material"
export const Makebutton = () => {
    return (
        <>
            <Button>text</Button>
            <Button variant="contained">contained</Button>
            <Button variant="outlined">outlined</Button>
        </>
    )
}

basicbutton

色の変更は
簡単な方法としては下記のようにcolor属性に適応する文字列を渡すことでボタンの色を変更することが可能です

import { Button } from "@mui/material"
export const Makebutton = () => {
    return (
        <>
            <Button color="secondary">text</Button>
            <Button color="success" variant="contained">contained</Button>
            <Button color="error" variant="outlined">outlined</Button>
        </>
    )
}

basicbutton
color属性で表現できる色の種類と適応する文字列は下記のようになっています

その他要素のpropsにどのような適用ができるかはComponentAPIに記載があるので探せば見つかります

ボタンを横並びにしたい等の場合はBottonGroupを利用するととても便利です
ButtonGropeを呼び出してButtonを囲うだけで横並びに早変わり

import { Button, ButtonGroup } from "@mui/material"
export const Makebutton = () => {
    return (
        <>
            <ButtonGroup>
                <Button>text</Button>
                <Button color="success" variant="contained" >contained</Button>
                <Button color="error" variant="outlined">outlined</Button>
            </ButtonGroup>
        </>
    )
}

basicbutton
この際Grope化される関係かvariant属性を割り振ってなくともoutline化されます

MUIがわざわざかっこよくしてくれたUIを私は軽くCSSでいじりたくなる時があります
そんな時は sx propsが便利です

@mui/systemによってThemeがどこかで定義されている（どこ？）。そのThemeに直接アクセスできるようになっており簡単にcssを変更することができます @mui/systemという認識も正しいかわからない @emotion/styledは関係ない系?

実際の使用方法

import { Button, ButtonGroup } from "@mui/material"
export const Makebutton = () => {
    return (
        <>
            <ButtonGroup>
                <Button sx={{ textTransform: "none" }}>text</Button>
                <Button color="success" variant="contained" >contained</Button>
                <Button color="error" variant="outlined">outlined</Button>
            </ButtonGroup>
        </>
    )
}

TEXT→textとinnerTextに書いた通りの内容が表示されます
transform

扱えるプロパティは下記に
https://mui.com/system/properties/

Text transformだと下記に

またスペーシング等もsxを使うと簡単にできそうです

<Button sx={{ textTransform: "none", mr: 1 }}>text</Button>

button

the default for the value is 8px

「1」の入力で8pxでした。「10」の入力で80pxでした

アイコンを入れる

事前にインストールが必要です。（「インストール」参照）

アイコンを見付けると上部にimport文があるのでコピペ
castle

import { Button, ButtonGroup } from "@mui/material"
import CastleIcon from '@mui/icons-material/Castle';
export const Makebutton = () => {
    return (
        <>
            <ButtonGroup>
                <Button sx={{ textTransform: "none", mr: 1 }}>text</Button>
                <Button color="success" variant="contained" >contained</Button>
                <Button color="error" variant="outlined">outlined</Button>
            </ButtonGroup>
            <CastleIcon />
        </>
    )
}

castle
色は勝手に変わってくれるが変わらないときはsxとcolorで変更できる

Buttonの仕様でボタンの中身に入れることもできる

import { Button, ButtonGroup } from "@mui/material"
import CastleIcon from '@mui/icons-material/Castle';
export const Makebutton = () => {
    return (
        <>
            <ButtonGroup>
                <Button sx={{ textTransform: "none", mr: 1 }}>text</Button>
                <Button color="success" variant="contained" startIcon={<CastleIcon />} >contained</Button>
                <Button color="error" variant="outlined" endIcon={<CastleIcon />}>outlined</Button>
            </ButtonGroup>
            <CastleIcon />
        </>
    )
}

castle

Router Linkにしたい

先日onbording教育でReact-Router-domの使い方を教わりましたので、MUIのボタンをLinkにしてrouterしたいと思い試しました

react router domの利用方法は割愛し結論

import { Routes, Route, Link } from "react-router-dom"

<Button component={Link} to="/">Home</Button>

react-router-domからLinkをimportしておいてButtonのcomponent属性にLinkを渡します
後はtoに<Route>で設定したtoを入れてやれば無事にMUIのButtonをLinkとして利用できるようになります

import { Routes, Route, Link as Routerlink } from "react-router-dom"

<Button component={Link} to="/">Home</Button>

Linkという名称のコンポーネントがMUIにも存在するのでバッティングする場合は上記のようにするのが一般的なようです
私はcomponentをtypoしており１時間近く格闘してしまいました・・・

そのうち更新するかも

GitHubで編集を提案