React转TS时Grid加width报No overload matches this call错误如何解决

报错原因 #

你遇到的TS2769报错核心原因是：Material UI的Grid组件官方类型定义中未提供width属性，TypeScript的严格类型校验不允许传入组件未声明的属性，所以编译不通过。

可行替代方案 #

你可以通过以下三种规范方式给Grid设置最大固定宽度：

• 内联style直接设置
  把宽度规则写到已有的style属性对象中即可，示例如下：

  <Grid
    spacing={0}
    container
    direction="row"
    xs={3}
    className={classes2.color}
    style={{ height: "100%", overflow: "auto", maxWidth: 240 }}
  >
  

  你可以根据需求把maxWidth换成你需要的数值，支持直接写数字（默认单位px）或者带单位的字符串，比如maxWidth: "20rem"。如果需要固定宽度，把maxWidth换成width即可。
• 通过样式类定义
  你已经给Grid绑定了classes2.color样式类，直接在该样式类的定义中添加maxWidth规则即可，不需要修改Grid组件的属性。如果是用makeStyles/styled定义的样式，直接在对应样式对象中加maxWidth: 你需要的宽度值即可。
• 使用MUI专属sx属性（v5及以上版本适用）
  MUI v5开始支持sx属性用于快速写样式，你可以直接通过sx设置宽度：

  <Grid
    spacing={0}
    container
    direction="row"
    xs={3}
    className={classes2.color}
    sx={{ maxWidth: 240 }}
    style={{ height: "100%", overflow: "auto" }}
  >
  

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