MUI TextField中disabled传参差异及aria-disabled设置位置咨询

一、直接传disabled 和 InputProps={{ disabled: true }} 的区别 #

• 直接传递disabled属性：这是MUI TextField组件顶层暴露的标准属性，设置后会同步禁用整个TextField组件——包括输入框、标签、辅助文本等所有关联元素，同时自动添加aria-disabled等无障碍属性，统一应用禁用样式，是组件设计的常规用法。
• 通过InputProps={{ disabled: true }}传递：InputProps是用来给底层Input组件传参的集合，这里设置disabled只会让核心输入框禁用，但TextField的标签、辅助文本等外层元素不会自动切换到禁用样式，也不会同步更新组件整体的无障碍状态，容易出现视觉和功能不一致的情况。

二、推荐的TextField禁用方式 #

优先用直接传递disabled属性，示例代码：

<TextField disabled label="示例输入框" />

这种方式完全遵循MUI的组件设计规范，能保证整个组件的状态、样式统一，还能自动处理无障碍相关的细节，不用手动调整其他元素。

三、aria-disabled 属性的放置位置 #

如果需要手动设置aria-disabled（注：直接用disabled时MUI会自动生成该属性，一般不需要手动添加），要放在inputProps里——因为inputProps是直接传递给原生<input> DOM元素的属性集合，ARIA属性属于原生元素的属性范畴。示例：

<TextField inputProps={{ 'aria-disabled': true }} label="示例输入框" />

而InputProps是传给MUI封装的Input组件的参数，不是直接作用于原生输入元素的，所以不适合放原生ARIA属性。

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