🛠️

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

2023/01/18に公開約900字

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

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


このアスタリスクです

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

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

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


できた

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

カスタマイズをもっと知りたい人は以下のドキュメントをお読みください。
https://mui.com/material-ui/customization/theme-components/

Discussion

ログインするとコメントできます