Ändern Sie die Farbe der Textfeldbeschriftungen in der MUI
<p>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: </p>
<pre class="brush:php;toolbar:false;"><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“
},
}}
/></pre>