【MUI】エラー時にTextFieldのラベルを自動で赤文字にしたくない

2023/07/19に公開

概要

MUI の TextField コンポーネントのカスタマイズについて
デフォルトだと「エラー時にラベルまで自動で赤文字になる」が、要件として黒文字のままにしたかったので調査

環境

react@18.2.0
mui/material@5.13.5
react-hook-form@7.45.1

コード

<Controller
  name="text"
  control={control}
  render={({ field, fieldState }) => (
    <TextField
      {...field}
      label="ラベル"
      error={!!fieldState.error}
      helperText={errors.code?.message}
      fullWidth
      sx={{
        //ここ大事
        "& .Mui-error.MuiFormLabel-root": {
          color: "black",
        },
      }}
    />
  )}
/>

エラー時には.Mui-error が付与される。
一緒にラベルのクラスも併せて指定してあげる。

検証ツールで確認
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-error MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined css-1ttn029-MuiFormLabel-root-MuiInputLabel-root" data-shrink="false" for=":r1:" id=":r1:-label">ラベル</label>

MuiFormLabel ではなく MuiInputLabel を指定しても動いた

GitHubで編集を提案

Discussion