🛠️

MUIでフォームの"*"だけを赤くしたい

2023/01/18に公開

React

mui

tech

フォームで入力必須事項を表すときによく使われるアスタリスク"*"。MUIを使っていてこいつの色だけを変える方法を紹介します。

結論：テーマを編集すればいける

このアスタリスクです

MUI初心者なのもあって、最初は「CSSのめっちゃ深いセレクタで指定するとかか…？」と思っていましたが、そこはさすがのMUI。ちゃんと解決策がありました。
カスタムテーマに以下の項目を追加しましょう。

export const theme = createTheme({
+  components: {
+    MuiFormLabel: {
+      styleOverrides: {
+        asterisk: {
+          color: '#d32f2f', // MUIデフォルトテーマの「error」の色
+          '&$error': {
+            color: '#d32f2f',
+          },
+        },
+      },
+    },
+  },
})

これだけです。（結局こっちのネストも深い…。）

できた

テーマの編集なら、コンポーネントごとにスタイルを気にしなくてもいいですし、一貫性も担保できていいですね。
まだ試していませんが、MUIはこうしてcomponents:{}内に追記することで既存のコンポーネントをカスタマイズできるようです。ありがたや。

カスタマイズをもっと知りたい人は以下のドキュメントをお読みください。

また、本来はUXを考えると、すべてのフォームに「必須」と表示するか、任意入力のフォームにのみ「任意」と表示するほうが新設設計であることを申し添えておきます。

Discussion