Material UI v5 Persistent Drawer 编译报TS2339错误问题求助

这个TypeScript报错是因为你通过styled创建自定义Main组件时，没有为传入的自定义属性open声明类型，TypeScript默认无法识别open是组件的合法入参，因此抛出属性不存在的错误。你配置的shouldForwardProp仅用于控制属性是否透传给底层DOM元素，不会影响TS的类型校验逻辑。

推荐通过给styled方法传入自定义属性泛型的方式解决，代码示例如下：

import { styled, Theme } from '@mui/material/styles';

// 显式声明自定义open属性的类型
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
  open?: boolean;
}>(({ theme, open }) => ({
  flexGrow: 1,
  padding: theme.spacing(3),
  transition: theme.transitions.create('margin', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  marginLeft: 0,
  // open为true时应用的偏移样式
  ...(open && {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 240,
  }),
}));

如果后续还有其他类型异常，建议你将beta版本的@material-ui/core、@material-ui/icons替换为MUI5正式版的@mui/material、@mui/icons-material，beta阶段的版本存在很多未完善的类型定义，升级到正式版可以避免大量不必要的类型报错。

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