未捕获的类型错误：无法读取 MUI 反应中未定义的属性(读取"边框半径")

Question

我正在实现一个带有搜索栏组件的导航栏。我样式我的搜索组件与MUI风格从@emotion/styled从MUI。并给搜索组件一个borderRadius: theme.shape.borderRadius。

但是显示以下错误

Uncaught TypeError: Cannot read properties of undefined (reading 'borderRadius')

这是我的搜索组件样式

const Search = styled('div')(({ theme }) => ({
backgroundColor: 'white',
padding: '0 10px',
borderRadius: theme.shape.borderRadius,
}));

，但当我给borderRadius: 10px工作很好。跟我通过的主题有关的。请帮我写代码

也提到了以下stackoverflow问题，但没有解决我所有这些问题都过时了，我正在使用MUI 5

使用MUI Button时:TypeError: Cannot read property 'borderRadius'未定义的

使用材质UI时borderRadius不工作

Answer 1

我通过创建自己的主题解决了这个问题。把主题作为道具传递给ThemeProvider并将ThemeProvider中的所有子元素都包装在app.js

import { ThemeProvider } from "@mui/material";
import {theme} from './theme'
<ThemeProvider theme={theme}>
<Box>
<Navbar />
</Box>
</ThemeProvider>

使用createTheme from MUI创建自定义主题

export const theme = createTheme({
palette:{
primary:{
main: "#1760a5",
light: "skyblue"
},
secondary:{
main: '#15c630',
},
otherColor:{
main:"#999"
}
}
});