Tukar warna label medan teks dalam MUI

Question

Hai, saya menghadapi masalah menukar warna label teks dalam medan teks MUI. Saya telah berjaya menyesuaikan warna sempadan dan keadaan tuding (termasuk label), saya tidak boleh menukar warna label dalam keadaan bukan tuding. Saya telah mencuba pelbagai nama kelas yang terdapat dalam DOM (termasuk MuiInputBase-input), seperti yang saya lakukan di tempat lain, tanpa kejayaan. Saya juga mencuba inputProps tetapi tidak ada yang berhasil. Berikut ialah kod saya:

 {setSearchParams({...searchParams, dist: e.target.value})} }
                    sx={{
                        // Warna sempadan apabila difokuskan
                        "&& .Mui-fokus .MuiOutlinedInput-notchedOutline": {
                            sempadan: "1px pepejal #3B82F6",
                        },

                        // Warna label apabila difokuskan
                        "& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": {
                            warna: "#3B82F6",
                        },

                        //Warna sempadan dalam keadaan biasa
                        "& .MuiOutlinedInput-notchedOutline": {
                            sempadan: "1px pepejal #F1F4F9",
                        },
                        
                        // Warna label dalam keadaan biasa - <- tiada kesan
                        "& .MuiInputBase-root-MuiOutlinedInput-root": {
                            warna: "#F1F4F9"
                        },
                    }}
                                         />            

Answer 1

Berikut ialah cara anda boleh menukar warna label:

<TextField
      className="w-full my-2 "
      id="outlined-basic"
      label="距离（英里）"
      InputLabelProps={{
        sx: { color: "red", "&.Mui-focused": { color: "green" } },
      }}
      variant="outlined"
    />

Beberapa cadangan:

• Jangan gunakan/salin kelas yang dijana dalam DOM kerana ia mungkin berubah!
  .MuiFormLabel-root Boleh guna
  .css-1sumxir-MuiFormLabel-root - Tidak tersedia

• Double ampersand bukan sintaks yang sah
  & .MuiFormLabel-root Boleh guna
  && .MuiFormLabel-root Tidak tersedia