从 MUIv5 示例复制的代码上的类型错误不存在变量
Variable does not exist on type error on code copied from MUIv5 example
目标
我正在尝试在 MUI5 中创建一个抽屉侧边栏，它会在用户按下按钮时打开和关闭。所以我正在查看 docs for the Drawer, and the example.
问题
我已经从 the example 复制了代码并将其直接粘贴到我的项目中，但出现以下错误：
22 |
23 | const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
24 | ({ theme, open }) => ({
| ^
25 | flexGrow: 1,
26 | padding: theme.spacing(3),
我有一些其他类似的错误，我可以使用这个 SO 问题解决：
但是，它似乎不适用于定义 open。
主要问题
如何定义open才能有抽屉？
加分题
为什么我的 MUI 与 CodeSandbox 的 MUI 不同？
您复制了示例的 JavaScript 版本，而不是 TypeScript 版本。在文档中的示例中，您可以找到一个符号 (<>) 来显示完整的源代码（而不仅仅是一个片段）。展开完整源代码还会在左侧显示 JS/TS (JavaScript/TypeScript) 切换。选择“TS”将为您提供代码的 TypeScript 版本，并且您的选择会被记住以用于其他示例以及您稍后 return 访问该站点时。单击沙盒图标将带您到相应版本的代码。下面是 Persistent Drawer 示例的 TypeScript 沙箱：https://codesandbox.io/s/9ohdw8?file=/demo.tsx.
目标
我正在尝试在 MUI5 中创建一个抽屉侧边栏，它会在用户按下按钮时打开和关闭。所以我正在查看 docs for the Drawer, and the example.
问题
我已经从 the example 复制了代码并将其直接粘贴到我的项目中，但出现以下错误：
22 |
23 | const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
24 | ({ theme, open }) => ({
| ^
25 | flexGrow: 1,
26 | padding: theme.spacing(3),
我有一些其他类似的错误，我可以使用这个 SO 问题解决：
但是，它似乎不适用于定义 open。
主要问题
如何定义open才能有抽屉？
加分题
为什么我的 MUI 与 CodeSandbox 的 MUI 不同？
您复制了示例的 JavaScript 版本，而不是 TypeScript 版本。在文档中的示例中，您可以找到一个符号 (<>) 来显示完整的源代码（而不仅仅是一个片段）。展开完整源代码还会在左侧显示 JS/TS (JavaScript/TypeScript) 切换。选择“TS”将为您提供代码的 TypeScript 版本，并且您的选择会被记住以用于其他示例以及您稍后 return 访问该站点时。单击沙盒图标将带您到相应版本的代码。下面是 Persistent Drawer 示例的 TypeScript 沙箱：https://codesandbox.io/s/9ohdw8?file=/demo.tsx.