suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Ä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>
P粉860370921P粉860370921498 Tage vor544

Antworte allen(1)Ich werde antworten

  • P粉184747536

    P粉1847475362023-08-27 00:20:18

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

    <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 不可使用

    Antwort
    0
  • StornierenAntwort