MUI中TextField聚焦时InputLabel未进入聚焦状态的原因

我使用了以下结构：

<FormControl>
  <InputLabel htmlFor="field-1">Field 1</InputLabel>
  <TextField id="field-1" .../>
</FormControl>

发现TextField获得焦点时，InputLabel没有进入蓝色的聚焦样式状态。排查后确认不是样式问题，而是MUI没有给InputLabel添加Mui-focused类；但把TextField换成Select组件时，InputLabel就能正常触发聚焦状态。

原因分析 #

MUI的TextField组件内部已经封装了InputLabel的逻辑（通过label属性传入的标签会被组件内部处理）。当你在外层单独放置InputLabel并通过htmlFor关联时，TextField内部的聚焦状态无法同步到这个外部的InputLabel上，自然不会自动添加Mui-focused类。

而Select组件本身没有内置InputLabel，它需要配合外部的InputLabel使用，所以MUI会自动监听Select的聚焦事件，给对应的外部InputLabel添加聚焦类名。

解决方案 #

方案1：使用TextField内置的label属性（推荐）

直接移除外部的InputLabel，用TextField的label属性来设置标签，让组件内部自动管理标签的聚焦状态：

<FormControl>
  <TextField id="field-1" label="Field 1" ... />
</FormControl>

方案2：手动同步聚焦状态（需单独使用InputLabel时）

如果必须保留外部的InputLabel，可以通过监听TextField的onFocus和onBlur事件，手动控制InputLabel的类名：

import { useState } from 'react';
import { FormControl, InputLabel, TextField } from '@mui/material';

function YourComponent() {
  const [isFocused, setIsFocused] = useState(false);

  return (
    <FormControl>
      <InputLabel 
        htmlFor="field-1"
        className={isFocused ? 'Mui-focused' : ''}
      >
        Field 1
      </InputLabel>
      <TextField 
        id="field-1"
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        // 其他属性
      />
    </FormControl>
  );
}

内容的提问来源于stack exchange，提问作者Hyperbo Lee