Material UI TextField聚焦时字体颜色样式不生效求助

看起来你遇到的问题是TextField在聚焦状态下，字体颜色没有按照预期保持白色，而是变回了Material UI的默认紫色。我帮你分析下问题所在，以及对应的修复方案：

问题根源分析 #

1. 重复的InputLabelProps赋值：你在TextField里写了两次InputLabelProps，后面的InputLabelProps={{ className: classes.input }}会覆盖前面的标签样式设置，这不仅让标签样式错乱，也可能干扰输入框的样式优先级判断。
2. 聚焦状态的字体颜色未明确设置：你的input类只定义了默认状态的color: white，但没有在:focus伪类里明确指定字体颜色，Material UI内部的聚焦样式优先级更高，会把字体颜色变回默认的主题紫色。

修复方案 #

步骤1：移除重复的InputLabelProps #

首先把TextField里重复的属性合并，确保标签和输入框使用各自正确的样式类：

步骤2：增强输入框样式的优先级，明确聚焦时的字体颜色 #

修改useStyles里的input类，在:focus状态下强制设置color: white，同时可以结合Material UI的内部类名来提升样式优先级：

修改后的完整代码示例 #

const useStyles = makeStyles(theme => ({ 
  "@global": { 
    body: { 
      backgroundColor: darkModeEnabled ? DARK_COLOR : WHITE, 
      color: darkModeEnabled ? WHITE : DARK_COLOR 
    } 
  }, 
  input: { 
    color: "white",
    // 明确设置聚焦时的字体颜色，覆盖Material UI默认样式
    "&:focus": { 
      borderColor: "white",
      color: "white"
    },
    // 用Material UI内部聚焦类进一步确保优先级
    "&.Mui-focused": {
      color: "white"
    }
  }, 
  paper: { 
    marginTop: theme.spacing(8), 
    display: "flex", 
    flexDirection: "column", 
    alignItems: "center" 
  }, 
  avatar: { 
    margin: theme.spacing(1), 
    backgroundColor: "#FFFFFF", 
    color: RED 
  }, 
  form: { 
    width: "100%", // Fix IE 11 issue. 
    marginTop: theme.spacing(1) 
  }, 
  submit: { 
    margin: theme.spacing(3, 0, 2) 
  }, 
  darkModeColorInput: { 
    color: WHITE 
  }, 
  darkModeColorLabel: { 
    color: "#212020", 
    "&:after": { 
      borderColor: "#212020" 
    } 
  } 
}));

// 修正后的TextField组件
<TextField 
  margin="normal" 
  InputLabelProps={{ className: classes.darkModeColorLabel }} 
  InputProps={{ className: classes.input }} 
  required 
  fullWidth 
  id="usernameOrEmail" 
  label="username or email" 
  name="usernameOrEmail" 
  value={usernameOrEmail} 
  onChange={e => { 
    if (usernameOrEmailEmpty) { 
      setUsernameOrEmailEmpty(false); 
    } 
    if (error) { 
      clearAuthError(); 
    } 
    setUsernameOrEmail(e.target.value); 
  }} 
  autoComplete="off" 
  autoFocus 
  error={usernameOrEmailEmpty && "Field cannot be empty"} 
/>

额外优化建议 #

如果上述修改仍有优先级冲突问题，可以尝试使用InputProps的classes属性精准覆盖内部组件样式：

InputProps={{
  classes: {
    input: classes.inputContent,
    focused: classes.inputFocused
  }
}}

然后在useStyles中定义对应类：

inputContent: {
  color: "white"
},
inputFocused: {
  color: "white"
}

这种方式可以直接定位到Material UI输入框的内部元素，彻底避免样式覆盖问题。

内容的提问来源于stack exchange，提问作者Mike K