材质UI暗模式 [英] Material UI Dark Mode
本文介绍了材质UI暗模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现暗模式，我认为需要Material UI中的Paper组件来实现此操作。无论如何，我一直有问题，因为它做了相反的事情：它不能与纸张一起工作，我甚至不能删除它，因为其他重要的UI组件正在使用它。我找到的唯一"；修复程序是应用
.MuiPaper-root {
color: unset !important;
background-color: unset !important;
}
到Paper组件，它不会解决任何问题，因为它会与其他组件打乱。我是不是遗漏了什么？这是my_app.js
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<Provider store={store}>
<Paper sx={{ marginLeft: '250px' }} elevation={0}>
<Layout onGetTheme={getTheme}>
<main>
<Head>
<title>page</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
/>
</Head>
<Component {...pageProps} />
<Footer></Footer>
</main>
</Layout>
</Paper>
</Provider>
</ThemeProvider>
</StyledEngineProvider>
主题代码
const [darkMode, setDarkMode] = useState('light');
const theme = useMemo(
() =>
createTheme({
palette: {
mode: darkMode,
},
}),
[darkMode]
);
const darkModeHandler = () => {
setDarkMode(darkMode === 'light' ? 'dark' : 'light');
};
屏幕截图
是这样的：
应该是这样的：(当我应用.MuiPaper-root { color: unset !important; background-color: unset !important; }时，最后几个组件可以工作，这会扰乱其他组件
推荐答案
MUIv5改变了很多东西，包括品牌名称(Material-UI改为MUI)。他们将材料组件移动到一个名为@mui/material的新包装中。如果您碰巧从v4导入组件，那么它将不会带着情绪工作--v5中的默认样式引擎。因此请检查您的导入路径：
import Card from '@material-ui/core/Card'; // v4 - use JSS
import Card from '@mui/material/Card'; // v5 - use emotion by default
这篇关于材质UI暗模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
