MUI のテキスト フィールドのラベルの色を変更する

Question

<p>こんにちは。MUI テキスト フィールドのテキスト ラベルの色を変更できません。境界線の色とホバー状態 (ラベルを含む) は正常にカスタマイズできましたが、非ホバー状態ではラベルの色を変更できません。他の場所で行ったように、DOM で見つかったさまざまなクラス名 (MuiInputBase-input を含む) を試しましたが、成功しませんでした。 inputProps も試してみましたが、どちらもうまくいきませんでした。これが私のコードです: </p> <pre class="brush:php;toolbar:false;"><テキストフィールド className="w-full my-2" id="アウトライン-ベーシック" label="距離 (マイル)" inputProps={{ sx: {color: '#F1F4F9'} }} <- これは効果がありません バリアント = "アウトライン" onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} } sx={{ // フォーカス時の境界線の色 "&& .Mui に焦点を当てた .MuiOutlinedInput-notchedOutline": { 境界線: "1 ピクセルの実線 #3B82F6"、 }、 // フォーカス時のラベルの色 "& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": { カラー:「#3B82F6」、 }、 //通常時の枠線の色 "& .MuiOutlinedInput-notchedOutline": { 境界線: "1 ピクセルの実線 #F1F4F9"、 }、 // 通常の状態のラベルの色 - <- は効果がありません "& .MuiInputBase-root-MuiOutlinedInput-root": { カラー：「#F1F4F9」 }、 }} />

Answer 1

ラベルの色を変更する方法は次のとおりです:

リーリー

いくつかのアドバイス:

• 生成されたクラスは変更される可能性があるため、DOM 内で使用/コピーしないでください。
  .MuiFormLabel-root 使用可能
  .css-1sumxir-MuiFormLabel-root - 利用できません

• 二重アンパサンドは有効な構文ではありません
  & .MuiFormLabel-root 使用可能
  && .MuiFormLabel-root 利用できません