搜索

首页  >  问答  >  正文

改变MUI中文本字段标签的颜色

<p>嗨,我在更改MUI文本字段中的文本标签颜色方面遇到了问题。我已经成功自定义了边框颜色和悬停状态(包括标签),只是在非悬停状态下无法更改标签颜色。我尝试了在DOM中找到的各种类名(包括MuiInputBase-input),就像我在其他地方做的那样,但都没有成功。我还尝试了inputProps,但也没有任何效果。以下是我的代码:</p> <pre class="brush:php;toolbar:false;"><TextField className="w-full my-2 " id="outlined-basic" label="Distance (miles)" inputProps={{ sx: {color: '#F1F4F9'} }} <- 这没有任何效果 variant="outlined" onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} } sx={{ // 聚焦时的边框颜色 "&& .Mui-focused .MuiOutlinedInput-notchedOutline": { border: "1px solid #3B82F6", }, // 聚焦时的标签颜色 "& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": { color: "#3B82F6", }, // 正常状态下的边框颜色 "& .MuiOutlinedInput-notchedOutline": { border: "1px solid #F1F4F9", }, // 正常状态下的标签颜色 - <- 没有任何效果 "& .MuiInputBase-root-MuiOutlinedInput-root": { color: "#F1F4F9" }, }} /></pre>
P粉860370921P粉860370921479 天前505

全部回复(1)我来回复

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

    回复
    0
  • 取消回复