MUI 5关于主题提供者的新手问题。查看上的文档https://mui.com/customization/theming/我看到了几个例子，比如下面提供的例子，其中一个自定义主题的材质组件用ThemeProvider包装，以便应用自定义样式。
export default function CustomStyles() {
return (
<ThemeProvider theme={theme}>
<CustomCheckbox defaultChecked />
</ThemeProvider>
);
}
我还看到了ThemeProvider在"_js"；以全局应用自定义主题样式，如下所示。
export default function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
return (
<CacheProvider value={emotionCache}>
<Head>
<title>My page</title>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
<Header />
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
}
我真的很困惑这两者中哪一个是最佳实践，也许答案是两者都是。可以肯定地说，我通常想把我所有的全局主题样式都放在我的ThemeProvider包装中_js"；但是对于适用于特定组件的任何一次性或自定义样式，那么用另一个ThemeProvider包装器包装特定组件以应用特定于该组件的自定义样式是安全的吗？我只是觉得我在一次又一次地使用ThemeProvider来定制组件，感觉不太对劲。
我建议您在React应用程序的顶层使用一次ThemeProvider，即使它可能是多个嵌套的。
假设你的应用程序有一个设置，可以选择你的自定义主题，比如"亮"或"暗"。
在这种情况下，您需要切换选定的主题，该主题可以来自React Context API。
// src/App.js
...
import { createTheme, ThemeProvider } from '@mui/material';
const theme = createTheme(themeOption);
return (
<ThemeProvider theme={theme}>
<Router>
<Route>...
</Router>
</ThemeProvider>
);
...
如果你想了解更多，请看一看。材料ui使用基于所选主题模式的调色板原色