如何自定义Material UI TextField组件失焦状态下的标签文字颜色

你需要在makeStyles的样式定义中新增cssLabel类配置，用来控制标签失焦状态下的默认颜色，你当前代码已经在InputLabelProps中指定了标签的root类为classes.cssLabel，只需要补充对应的样式规则即可。

修改后的样式代码如下：

const useStyles = makeStyles({
  // 新增：控制失焦状态下标签的默认颜色
  cssLabel: {
    color: "blue !important", // 此处替换为你需要的失焦标签颜色
  },
  notchedOutline: {
    color: "red !important", // label focus color 
    borderWidth: "1px",
    borderColor: "red !important" // border color when out of focus
  },
  cssOutlinedInput: {
    color: "green !important", // text color when out of focus
    "&$cssFocused $notchedOutline": {
      borderColor: `yellow !important` // border color when Focused
    }
  },
  cssFocused: {
    color: "red !important" // text and label color when focused
  }, 
});

• 你可以把cssLabel中color的值替换为任意你需要的失焦标签颜色值
• 现有TextField组件的InputLabelProps配置已经绑定了cssLabel类，不需要额外修改组件代码，补充样式后即可生效。

内容的提问来源于stack exchange，提问作者Gil Edri