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

Question

嗨，我在更改MUI文本字段中的文本标签颜色方面遇到了问题。我已经成功自定义了边框颜色和悬停状态（包括标签），只是在非悬停状态下无法更改标签颜色。我尝试了在DOM中找到的各种类名（包括MuiInputBase-input），就像我在其他地方做的那样，但都没有成功。我还尝试了inputProps，但也没有任何效果。以下是我的代码：

<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"
                        },
                    }}
                                         />

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