没有在包装器组件中应用Mui主题

Question

使用React (typescript)和MUI(5.4.2)，我试图将所有关于样式的内容放在一个文件中，在我的App.tsx中包装所有内容。

问题:自定义MUI主题不适用于我的应用程序的其余部分(回退到默认MUI主题)

当ThemeProvider组件直接放置在App.tsx文件中时，整个事情工作得很好，但一旦我把它放在其他地方就坏了。我需要保持一个分离的组件，因为我将添加弹性UI在MUI之上。

我的App.tsx文件:

function App() {
<UiProvider>
// ...whole app
</UiProvider>
}

UiProvider组件是一个简单的包装器组件，如下所示:

import {ThemeProvider} from "@mui/styles";
import {CustomTheme} from "../../themes/CustomTheme";
import {createTheme, Theme} from "@mui/material/styles";
const UiProvider = (props: any) => {
return (
<ThemeProvider theme={CustomTheme}>
{props.children}
</ThemeProvider>
)
}
export default UiProvider

Answer 1

因为@mui/styles是MUI的遗留样式解决方案，如果这是针对v5的，那么ThemeProvider的导入可能应该是:

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