⛳
【MUI】エラー時にTextFieldのラベルを自動で赤文字にしたくない
概要
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 を指定しても動いた
Discussion