材质UI暗模式

本文介绍了材质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; }时，最后几个组件可以工作，这会扰乱其他组件

暗模式

问题描述

推荐答案