Ändern Sie die Farbe der Textfeldbeschriftungen in der MUI

Question

Hallo, ich habe Probleme beim Ändern der Textbeschriftungsfarbe in einem MUI-Textfeld. Ich habe die Rahmenfarbe und den Hover-Status (einschließlich der Beschriftung) erfolgreich angepasst. Ich kann die Beschriftungsfarbe im Nicht-Hover-Status einfach nicht ändern. Ich habe verschiedene im DOM gefundene Klassennamen (einschließlich MuiInputBase-input) ausprobiert, wie ich es auch anderswo getan habe, ohne Erfolg. Ich habe auch inputProps ausprobiert, aber auch nichts hat funktioniert. Hier ist mein Code:

<TextField
                    className="w-full my-2"
                    id="outlined-basic"
                    label="Entfernung (Meilen)"
                    inputProps={{ sx: {color: '#F1F4F9'} }} <- dies hat keine Auswirkung
                    Variante="umrissen"
                    onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} }
                    sx={{
                        // Rahmenfarbe bei Fokussierung
                        "&& .Mui-focused .MuiOutlinedInput-notchedOutline": {
                            Rand: "1px solid #3B82F6",
                        },

                        // Beschriftungsfarbe bei Fokussierung
                        "& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": {
                            Farbe: „#3B82F6“,
                        },

                        //Rahmenfarbe im Normalzustand
                        "& .MuiOutlinedInput-notchedOutline": {
                            Rand: "1px solide #F1F4F9",
                        },
                        
                        // Etikettenfarbe im Normalzustand - <- hat keine Auswirkung
                        "& .MuiInputBase-root-MuiOutlinedInput-root": {
                            Farbe: „#F1F4F9“
                        },
                    }}
                                         />

Answer 1

这里是一种可以改变标签颜色的方法：

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

一些建议：

• 不要使用/复制DOM中生成的类，因为它们可能会发生变化！
  .MuiFormLabel-root 可以使用
  .css-1sumxir-MuiFormLabel-root - 不可使用

• 双与号不是有效的语法
  & .MuiFormLabel-root 可以使用
  && .MuiFormLabel-root 不可使用