Material-UI v4示例的“Edit in CodeSandbox”功能失效，求无需从头搭建环境的简易修复方案

兄弟我之前也碰到过一模一样的问题！当时折腾了好一会儿，终于找到两个不用从头搭环境的快速修复方法，给你分享下：

方法一：适配React 18的新API（推荐，无需修改依赖） #

CodeSandbox现在默认会拉取React 18版本，而React 18已经移除了ReactDOM.render这个旧API，换成了createRoot的写法。你只需要修改index.js里的代码就行：

把原来的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';
ReactDOM.render(<Demo />, document.querySelector('#root'));

替换成：

import React from 'react';
import { createRoot } from 'react-dom/client';
import Demo from './demo';

// 用新的createRoot方法挂载组件
const rootElement = document.querySelector('#root');
const root = createRoot(rootElement);
root.render(<Demo />);

保存之后，CodeSandbox会自动重新编译，报错就会消失，示例也能正常运行了。

方法二：降级React版本到17.x（不用改代码） #

如果你不想调整代码写法，也可以直接把React版本降到Material-UI v4适配的17.x版本：

• 在CodeSandbox左侧的「Dependencies」面板里，找到react和react-dom这两个依赖
• 点击每个依赖版本号旁边的小编辑图标，输入17.0.2（或者其他17.x系列的稳定版本）
• 回车确认后，等待依赖自动更新完成，页面就会正常渲染组件了

为什么会出现这个错误？ #

简单说就是版本不兼容：Material-UI v4的示例代码是基于React 17及更早版本写的，用的是ReactDOM.render这个旧挂载方法；但现在CodeSandbox默认创建的项目会用React 18，这个版本里已经把ReactDOM.render移除了，所以才会抛出TypeError: _reactDom.default.render is not a function这个错误。

内容来源于stack exchange