在CodeSandbox测试Material-UI组件报错：_context$muiTheme.borderRadius未定义

我之前在CodeSandbox里测试Material-UI组件时，也碰到过一模一样的报错！这个问题本质是组件无法从上下文获取到正确的主题配置，大概率是主题注入不到位或者版本兼容性问题，给你几个具体的排查和解决方向：

1. 统一Material-UI版本，避免混用依赖 #

这个错误最常见的原因是混用了Material-UI v4和v5的包，两者的主题系统和导入路径完全不同：

• 如果用v4版本：确保依赖是@material-ui/core、@material-ui/styles，主题创建用createMuiTheme，组件要被ThemeProvider包裹：

  import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  
  const theme = createMuiTheme();
  
  function App() {
    return (
      <ThemeProvider theme={theme}>
        <Button variant="contained" color="primary">测试按钮</Button>
      </ThemeProvider>
    );
  }
  

• 如果用v5版本：依赖换成@mui/material、@mui/styles，还要安装@emotion/react和@emotion/styled（v5默认用emotion做样式引擎），主题创建用createTheme：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  import Button from '@mui/material/Button';
  
  const theme = createTheme();
  
  function App() {
    return (
      <ThemeProvider theme={theme}>
        <Button variant="contained" color="primary">测试按钮</Button>
      </ThemeProvider>
    );
  }
  

打开CodeSandbox左侧的「Dependencies」面板，检查是否同时存在@material-ui/core和@mui/material这类跨版本的包，有冲突的话直接删除旧版本。

2. 确保所有Material-UI组件都在ThemeProvider范围内 #

报错的核心是组件找不到主题上下文，所以必须保证你使用的所有Material-UI组件，都被ThemeProvider包裹。比如下面这种写法就会报错，因为Button不在主题上下文里：

// ❌ 错误写法
function App() {
  return (
    <>
      <Button variant="contained" color="primary">测试按钮</Button>
      <ThemeProvider theme={theme}>
        <div>其他内容</div>
      </ThemeProvider>
    </>
  );
}

正确的做法是把ThemeProvider放在组件树的最顶层，让所有Material-UI组件都能继承到主题。

3. 重置CodeSandbox环境 #

有时候CodeSandbox的缓存会导致依赖加载异常，你可以试试新建一个干净的React模板，手动安装对应版本的Material-UI依赖，再重新编写代码，避免旧缓存干扰。

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