Changer la couleur des étiquettes des champs de texte dans MUI

Question

Bonjour, j'ai du mal à changer la couleur de l'étiquette du texte dans un champ de texte MUI. J'ai personnalisé avec succès la couleur de la bordure et l'état de survol (y compris l'étiquette), je ne peux tout simplement pas changer la couleur de l'étiquette en l'état sans survol. J'ai essayé différents noms de classes trouvés dans le DOM (y compris MuiInputBase-input), comme je l'ai fait ailleurs, sans succès. J'ai aussi essayé inputProps mais rien n'a fonctionné non plus. Voici mon code :

 {setSearchParams({...searchParams, dist : e.target.value})} }
                    sx={{
                        // Couleur de la bordure lors de la mise au point
                        "&& .Mui-focused .MuiOutlinedInput-notchedOutline" : {
                            bordure : "1px solide #3B82F6",
                        },

                        // Couleur de l'étiquette une fois focalisé
                        "& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": {
                            couleur: "# 3B82F6",
                        },

                        //Couleur de la bordure à l'état normal
                        "& .MuiOutlinedInput-notchedOutline": {
                            bordure : "1px solide #F1F4F9",
                        },
                        
                        // La couleur de l'étiquette à l'état normal - <- n'a aucun effet
                        "& .MuiInputBase-root-MuiOutlinedInput-root": {
                            couleur: "# F1F4F9"
                        },
                    }}
                                         />            

Answer 1

Voici une façon de changer la couleur de l'étiquette :

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

Quelques suggestions :

• N'utilisez/ne copiez pas les classes générées dans le DOM car elles peuvent changer !
  .MuiFormLabel-root Peut être utilisé
  .css-1sumxir-MuiFormLabel-root - Non disponible

• La double esperluette n'est pas une syntaxe valide
  & .MuiFormLabel-root Peut être utilisé
  && .MuiFormLabel-root Non disponible