MUI 5中使用@emotion/styled时theme.shape.borderRadius报错求助

问题根源 #

报错是因为styled组件没从MUI主题上下文拿到theme对象，导致theme为undefined，自然无法读取theme.shape.borderRadius。直接写固定值能运行是因为不需要依赖theme。

解决方案 #

1. 确保应用被ThemeProvider包裹 #

MUI的theme需要通过ThemeProvider提供给整个应用（或目标组件树），没有这一步，styled组件根本拿不到theme。

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// 创建主题（可自定义配置，这里用默认）
const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* 你的导航栏、搜索组件都放在这里面 */}
    </ThemeProvider>
  );
}

export default App;

2. 正确编写styled组件的样式函数 #

在styled的回调函数里，必须接收theme作为props属性，才能访问主题变量。

示例：给搜索输入框设置样式

import styled from '@emotion/styled';
import { TextField } from '@mui/material';

const StyledSearchInput = styled(TextField)(({ theme }) => ({
  '& .MuiOutlinedInput-root': {
    borderRadius: theme.shape.borderRadius,
    // 其他自定义样式
    backgroundColor: theme.palette.background.paper,
  },
}));

如果是自定义容器组件：

const StyledSearchWrapper = styled('div')(({ theme }) => ({
  borderRadius: theme.shape.borderRadius,
  border: `1px solid ${theme.palette.divider}`,
  padding: '8px 12px',
  display: 'flex',
  alignItems: 'center',
}));

3. 检查常见错误 #

• 确认ThemeProvider是从@mui/material/styles导入的，不是其他包。
• 确保使用styled组件的部分在ThemeProvider的包裹范围内，不要在Provider外部使用。
• 检查样式函数里的参数是否正确解构，比如有没有写成(theme)而不是({ theme })（styled传递的是props对象，theme是props的一个属性）。

内容的提问来源于stack exchange，提问作者Krishnadev. V