はじめに

今年の 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",
          },
        },
      },
    },
  },
});

Componentsの中にはMuiSwitchが存在するはずです。ファイルの中で検索をかけてみてください。

styleOverridesで渡してるComponentsOverridesを確認します。

ComponentsOverridesの中で、MuiSwitchを検索かけます

ありました。SwitchClassKeyの中身を確認してください。

colorSecondary: string;が見つかりました。このプロパティに文字列で渡したら Switch コンポーネントの secondary だけに色を反映させられるようです。（追うのがこんなに長い説明になると思ってなかったです、、、お疲れ様でした。）

でも、chatGPT に書いてもらったcolorSecondaryは、色を渡してるだけではありませんね 🤔
"&.Mui-checked": { color: "blue", },

これに関しては、Switch コンポーネントの公式ドキュメントを見てみます。

Switch API というページの CSS classes を見てください。

翻訳すると、下のように書いてありました。

内部 SwitchBase コンポーネントの checked クラスに適用される状態クラス。

つまり、checkedが入ってるときの色指定みたいですね。

この場合は、&クラス名とすることで、色の指定ができるようでした。

こんな感じで、global.tsx としてコンポーネントの Theme を一元管理できるんです。

でも、毎回グローバルで色を定義するのも面倒ですよね。

下の記事でコンポーネント単位で色を指定する方法を書いてます。

よかったら、見てみてください。🙇‍♂️

おわりに

デフォで用意されている color を上書きする方法をまとめました。

書きながらprimary、secondary以外の色ってどうやって変更するの？？という疑問が浮かびましたが、記事がかなり長くなりそうだったので、この記事では割愛させてもらいました 🙇‍♂️

私事ですが、今年はエンジニア1年目でかなりバタバタな1年でした。

テックブログも9月から書き始めQiitaとzennを合わせて5記事書きました。

来年は、毎月1記事、年間12記事書けるように頑張りたいと思います。

ここまで読んでくれてありがとうございました。🙇‍♂️

良いお年を！🎍