材质 UI 深色模式答案

【问题标题】：Material UI Dark Mode材质 UI 深色模式
【发布时间】：2021-09-27 18:11:26
【问题描述】：

我正在尝试实现暗模式，并且我认为 Material UI 需要 Paper 组件来执行此操作。无论如何，我一直遇到问题，因为它正在做相反的事情：它不适用于 Paper，而且我什至无法删除它，因为其他 Material UI 组件使用它。我发现的唯一“修复”是应用

.MuiPaper-root {
  color: unset !important;
  background-color: unset !important;
}

到 Paper 组件，它不能解决任何问题，因为它会与其他组件混淆。我错过了什么吗？这是我的 _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; } 时，这些最后的工作会弄乱其他组件

【问题讨论】：

你不需要用纸包裹你的组件来使用黑暗模式，你应该添加你的主题代码以便我们检查它。
@Abdulmuhaymin 我添加了它。我尝试删除 Paper，但即便如此，我正在使用的其他组件（如卡片）使用它，它仍然与那些混淆
你试过没有StyledEngineProvider的暗模式吗？
@FabioC 我无法重现您仅使用该 sn-p 所说的行为。我需要更多上下文，具体来说，我的假设是您可以从 v4 而不是 v5 material-ui/core 而不是 @mui/material 导入组件
@NearHuscarl 不想成为多余的人，但我想我爱你。我花了一整天的时间在上面大声笑。这正是问题所在。谢谢

标签： reactjs material-ui next.js

【解决方案1】：

MUI v5 改变了很多东西，包括品牌名称（Material-UI to 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

【讨论】：