MUI のテキスト フィールドのラベルの色を変更する
P粉860370921
P粉860370921 2023-08-26 17:15:52
0
1
514
<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」 }、 }} />
P粉860370921
P粉860370921

全員に返信(1)
P粉184747536

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

リーリー

いくつかのアドバイス:

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

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート