React中Material UI TextField选中时如何扩展为全宽？

你可以通过两种简洁的方式实现需求：利用React状态控制宽度切换，或者使用CSS伪类实现纯样式层面的动态调整，以下是具体方案：

方法一：React状态 + 聚焦/失焦事件 #

通过维护状态控制fullWidth属性和父容器宽度，同时监听TextField的onFocus和onBlur事件更新状态：

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

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

  return (
    <FormGroup sx={{ 
      maxWidth: isFocused ? '100%' : '200px', 
      transition: 'max-width 0.3s ease' 
    }}>
      <FormControl>
        <TextField
          id="first_name"
          label="First name"
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          fullWidth={isFocused}
        />
      </FormControl>
    </FormGroup>
  );
}

• 用isFocused状态联动控制父容器maxWidth和TextField的fullWidth属性
• 添加transition实现平滑的宽度过渡效果
• onFocus/onBlur能准确捕获输入框的聚焦/失焦状态，比onClick更可靠（点击输入框外失焦时也能自动恢复宽度）

方法二：纯CSS伪类实现（无需JS状态） #

利用CSS的:focus-within伪类，当FormGroup内部的TextField获得焦点时自动修改父元素宽度，这种方式更轻量化：

import { FormGroup, FormControl, TextField } from '@mui/material';

function MyForm() {
  return (
    <FormGroup sx={{ 
      maxWidth: '200px', 
      transition: 'max-width 0.3s ease',
      '&:focus-within': {
        maxWidth: '100%'
      }
    }}>
      <FormControl fullWidth>
        <TextField
          id="first_name"
          label="First name"
        />
      </FormControl>
    </FormGroup>
  );
}

• 给FormControl添加fullWidth，确保TextField在父容器宽度变化时自动占满空间
• :focus-within会在FormGroup内部任意元素获得焦点时触发，自动扩展宽度
• 同样保留过渡动画提升用户体验

关于onClick未触发的说明 #

TextField是封装后的组件，点击事件可能被内部子元素捕获且未冒泡到外层组件，因此使用onFocus/onBlur或CSS伪类是更可靠的方案。

内容的提问来源于stack exchange，提问作者engineer-x