Material UI Checkbox组件无法使用defaultChecked、size等标准Props，报TS2769类型错误

我太懂这种被TypeScript类型错误卡得头大的感觉了！先给你揪出问题的核心：你现在用的根本不是Material UI的可交互Checkbox表单组件，而是它的图标组件！

看你Test组件里的导入语句：

import {CheckBox} from "@mui/icons-material";

@mui/icons-material里的CheckBox只是个静态SVG图标，本质是SvgIcon组件，它只支持图标相关的props（比如color、图标专属的size），完全没有defaultChecked这类表单组件的属性，所以TypeScript直接给你抛出类型不匹配的错误——这就相当于你拿一个按钮图标当真正的按钮用，肯定不行啊！

解决方法：导入正确的Checkbox组件 #

你需要从@mui/material里导入真正的Checkbox表单组件，修改你的Test组件代码：

import * as React from "react";
// 替换成正确的导入路径
import { Checkbox } from "@mui/material";

export default function Test() {
  return (
    <div>
      {/* 现在可以正常使用defaultChecked、size等props了 */}
      <Checkbox defaultChecked size="small" />
    </div>
  );
}

如果需要自定义Checkbox的图标样式 #

要是你就是喜欢@mui/icons-material里的图标样式，也可以把它作为Checkbox的自定义图标来用：

import * as React from "react";
import { Checkbox } from "@mui/material";
import CheckBoxIcon from "@mui/icons-material/CheckBox";
import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";

export default function Test() {
  return (
    <div>
      <Checkbox
        defaultChecked
        size="small"
        icon={<CheckBoxOutlineBlankIcon />}
        checkedIcon={<CheckBoxIcon />}
      />
    </div>
  );
}

补充说明 #

你提到之前用Box组件没问题，是因为Box是Material UI的布局组件，本身就支持各种通用样式props；而你能给图标组件加style生效，是因为SvgIcon组件本身支持style属性，但这和表单控件的功能props完全是两码事。

下次遇到这种类型错误，先检查一下组件的导入路径是不是搞混了——Material UI的图标库和组件库是分开的，很容易不小心导错！

备注：内容来源于stack exchange，提问作者Fprogramer