React Material UI中TextField标签互相重叠如何解决

你的代码存在3处关键用法错误，直接触发了标签重叠的异常：

• 类名属性写法错误：React 环境下所有原生DOM、第三方组件的类名属性必须使用className声明，你给TextField传入的class="mr-2"不会被框架识别，配置的Tailwind右外边距样式完全未生效，两个输入框无间距紧贴排列，直接导致浮动定位的标签互相重叠。
• 函数组件参数接收错误：React函数组件的第一个入参是完整的props对象，你写的function TableField(id)会把整个props对象赋值给形参id，后续传给外层div的id属性会被渲染为无效的[object Object]，属于基础语法错误。
• 组件受控逻辑异常：你给TextField硬编码了固定的value值但未绑定onChange回调，组件会被判定为异常受控组件，会干扰Material UI内置的标签浮动收缩逻辑，加重显示异常。

按以下步骤修改即可解决问题：

1. 将所有class属性替换为className，确保样式类正常生效
2. 修正函数组件的参数接收逻辑，从props中正确解构需要的id字段
3. 修正输入框的值绑定逻辑：如果只需要初始值，用defaultValue替代硬编码的value；如果需要受控能力，补充对应state和onChange回调
4. 建议给flex布局下的输入框设置固定宽度占比，避免内容挤压

修复后的代码示例：

function TableField({ id }) {
    return (
        <div className='flex' id={id}>
            <TextField className="mr-2 w-[200px]" id='0' label="Field type" variant="outlined" defaultValue='2' />
            <TextField className="w-[200px]" id='1' label="Field Name" variant="outlined" defaultValue='3' />
        </div>
    );
}

如果需要实现受控输入，参考以下写法：

import { useState } from 'react';

function TableField({ id }) {
    const [fieldType, setFieldType] = useState('2');
    const [fieldName, setFieldName] = useState('3');

    return (
        <div className='flex' id={id}>
            <TextField 
                className="mr-2 w-[200px]" 
                id='0' 
                label="Field type" 
                variant="outlined" 
                value={fieldType}
                onChange={(e) => setFieldType(e.target.value)}
            />
            <TextField 
                className="w-[200px]" 
                id='1' 
                label="Field Name" 
                variant="outlined" 
                value={fieldName}
                onChange={(e) => setFieldName(e.target.value)}
            />
        </div>
    );
}

内容的提问来源于stack exchange，提问作者Apoorv pandey