React重构为TypeScript时Material-UI Input组件readOnly属性报错

嘿，这个问题我重构项目时也踩过同款坑！核心原因很明确——Material-UI的Input组件在TypeScript的类型定义里，readOnly并不是直接可传递的顶层属性，它属于原生<input>元素的属性，得通过专门的inputProps属性传递给内部的原生输入框才行。

正确的写法示例： #

import { Input } from "material-ui";

class Cp extends React.Component<any, any> {
  render = () => <Input inputProps={{ readOnly: true }} />
}

为什么会触发TS2559错误？ #

TypeScript会严格校验组件的属性类型，而Material-UI的InputProps类型接口里并没有直接定义readOnly字段。它把所有原生输入框的属性统一收拢到inputProps对象中，所以直接传递readOnly时，TypeScript会判定这个属性不属于InputProps的合法字段，从而抛出“无共同属性”的错误。而JavaScript没有类型校验机制，所以能正常运行。

额外小技巧 #

不光是readOnly，如果需要传递其他原生<input>的属性（比如autocomplete、spellCheck这类），都得通过inputProps来传递，这样就能避开TypeScript的类型校验报错啦。

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