MUIを1年使ってみてわかったことを書き殴る

Posted at 2024-12-29

はじめに

今年の 3 月からフロントエンドエンジニアとして働いています。

エンジニアとして就労する前から、コンポーネントライブラリは、MUI を使っています。

就労後も、現場で使っているコンポーネントライブラリがたまたま MUI でした。

つまり、MUI を触るようになって 1 年が経過していました。（あっという間の 1 年でした。。。）

この 1 年で学んだこと苦戦したことの多くは、MUI の操作だったんじゃないかと思ったので、備忘録として記事にまとめます。

間違った情報などありましたら、コメントで教えていただけますと幸いです。🙇‍♂️

MUI とは？

MUI とは、React で利用できる UI コンポーネントライブラリの１つです。

プロジェクトに、ライブラリをインストールするだけで、コンポーネントとして扱えます。

例えば、下のようなSwitchコンポーネントを作りたいシーンがあったとします。

MUI を使ったら、下の記述だけで完結できます。

Switch.tsx

import { Switch } from "@mui/material";

export default function sample() {
  return <Switch />;
}

かなり簡単ですよね?

これがコンポーネントライブラリの素晴らしいところです。

この記事で書きたいこと

MUI を使えばプロジェクトに、コンポーネントを、簡単に作ることができます。

ですが、デフォルトコンポーネントから変化を与えたい場合があると思います。

先ほどのSwitchコンポーネントで言うと、

色を変更したい
トグルのスピードを速さを調節したい
サイズを大きくしたい

など、デザインのコンポーネントに合わせるためには、いろいろ変更を加える必要があると思います。

こんな場合でも、MUI で用意されている API に適切な props を渡すことで、UI の状態を変えることができます。

ほとんどのコンポーネントには、sx と言う props が用意されており、CSS in JS を書くことができます。

ですが、私が入った現場では、メンテナンス性、可読性を考慮して sx を極力使わない方針をとっていました。

「使えそうな props があるか、どんな感じで探していたのか」 について記録をまとめたいと思います。

Switch の色を変更したい

Gif のようにトグルの色は、デフォルトが青です。これを変更してみます。

MUI で Switch のドキュメントを開きました。

ドキュメントを開いたらColorが用意されてます。すでに用意されているColorで問題なければ、color に定義されている props を渡すだけで色を変化できそうです。

color と書き加えたプロパティにマウスをホバーしてみましょう。デフォで、secondary、primary、error、info、success、warning、defaultが割り当てられています。

下のように color にsecondaryを渡してみました。

Switch.tsx

import { Switch } from "@mui/material";

export default function Sample() {
  return <Switch
  color="secondary"
  />;
}

すると、下のようにSwitchコンポーネントの色を簡単に変更できました。めちゃ簡単ですね。

デフォルトで用意されている色以外を割り当てたい場合

おそらくデフォルトで用意されている色以外を割り当てたい場合がほとんどだろうと思います。

やり方はいくつかあると思いますが、1 つピックアップして紹介したいと思います。

global.tsx で色を変更させる

global.tsx で色を変更させる

Switch コンポーネントの color に、デフォルトで割り当てられている、secondary、primary、error、info、success、warning、defaultの色に上書きする方法です。

これはやったことなかったけど、ずっと試してみたかった方法でした。よくわかんなかったので chatGPT に質問したところ、下のような ThemeProvider を提供してくれました。

global.tsx

import { createTheme, ThemeProvider as Provider } from "@mui/material/styles";

// カスタムテーマの作成
const theme = createTheme({
  components: {
    MuiSwitch: {
      styleOverrides: {
        // secondaryのスタイルをカスタマイズ
        colorSecondary: {
          "&.Mui-checked": {
            color: "blue", // チェックされた状態のアイコンの色
          },
          "&.Mui-checked + .MuiSwitch-track": {
            backgroundColor: "blue", // チェックされた状態のスライダー背景色
          },
        },
      },
    },
  },
});

interface ThemeType {
  children: React.ReactNode;
}

export default function ThemeProvider({ children }: ThemeType) {
  return <Provider theme={theme}>{children}</Provider>;
}

さて、先ほど Switch に渡していたcolor="secondary"の色は変化したのでしょうか？

どうやら無事にsecondaryの色を変更できたようです。

これだとどう言う仕組みで色が変化したのかわからないので、少しコードを折ってみましょう。

まず、下のcreateThemeのcomponentsを探します。

※createThemeをコマンド＋ホバーすることで createTheme に遷移できます。

global.tsx

const theme = createTheme({
  components: {
    // ↓下を探す
    MuiSwitch: {
      styleOverrides: {
        // secondaryのスタイルをカスタマイズ
        colorSecondary: {
          "&.Mui-checked": {
            color: "blue",
          },
          "&.Mui-checked + .MuiSwitch-track": {
            backgroundColor: "blue",
          },
        },
      },
    },
  },
});

createThemeの引数としてcomponentsが受け取れることを確認できました。

では、componentsの中身を確認するために、CssVarsThemeOptionsに遷移して確認してみましょう。

CssVarsThemeOptionsの中にcomponentsがあることを確認しました。

componentsに渡せるのはComponentsで持ってるものみたいです。Componentsに遷移しましょう。

さて、componentsまでやってきました。下の Theme を思い出してください。

global.tsx

const theme = createTheme({
  components: {
    // ↓下を探す
    MuiSwitch: {
      styleOverrides: {
        // secondaryのスタイルをカスタマイズ
        colorSecondary: {
          "&.Mui-checked": {
            color: "blue",
          },
          "&.Mui-checked + .MuiSwitch-track": {
            backgroundColor: "blue",
          },
        },
      },
    },
  },
});