仅在“ThemeProvider”中使用MUI 5 ThemeProvider是最佳实践，还是可以在每个组件上使用？
梅五新生问有关ThemeProvider的问题。查看https://mui.com/customization/theming/上的文档，我看到了几个示例，例如下面提供的示例，其中一个定制主题的材料组件被ThemeProvider包装，以便应用自定义样式。
export default function CustomStyles() {
return (
<ThemeProvider theme={theme}>
<CustomCheckbox defaultChecked />
</ThemeProvider>
);
}我还看到了ThemeProvider在"_app.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”的_app.js包装器中，但是对于适用于特定组件的任何一次性或自定义样式，那么用另一个ThemeProvider包装器包装特定于该组件的定制样式是安全的吗？我只是觉得我一次又一次地为定制组件使用ThemeProvider，这感觉不太对。
回答 1
Stack Overflow用户
发布于 2021-12-02 19:08:12
我建议您在一次反应应用程序的顶层使用ThemeProvider，即使它可能是多个嵌套的。
假设您的应用程序有一个设置，它可以选择您的自定义主题，比如“光明”或“黑暗”。
在这种情况下，您需要切换选定的主题，该主题可以来自React 上下文API。
// src/App.js
...
import { createTheme, ThemeProvider } from '@mui/material';
const theme = createTheme(themeOption);
return (
<ThemeProvider theme={theme}>
<Router>
<Route>...
</Router>
</ThemeProvider>
);
...如果你想知道更多，请看一看。材质用户界面根据选定的主题模式使用调色板原色
https://stackoverflow.com/questions/70203926
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号