Material UI Dark Mode

Question

I am trying to implement dark mode, and I thought the Paper component was needed from Material UI to do so. Anyway, I've been having problems since it's doing the opposite: it won't work with Paper, and I cannot even remove it since other Material UI components use it. The only "fix" I found is applying

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

to the Paper component, which doesn't solve anything since it then messes with other components. Am I missing something? This is 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>

Theme code

    const [darkMode, setDarkMode] = useState('light');
     const theme = useMemo(
    () =>
        createTheme({
            palette: {
                mode: darkMode,
            },
        }),
    [darkMode]
);
    const darkModeHandler = () => {
    setDarkMode(darkMode === 'light' ? 'dark' : 'light');
};

SCREENSHOTS

This is how it is:

This is how it should be: (these last ones work when I apply .MuiPaper-root { color: unset !important; background-color: unset !important; } which messes up other components

You don't need to wrap your components with paper to use the dark mode, and you should add your theme code so we can check it. — Abdulmuhaymin, Sep 27 '21 at 18:21
@Abdulmuhaymin I added it. I tried removing Paper, but even so, other components I am using (like Cards) use it and it still messes with those — illyria, Sep 27 '21 at 18:28
Have you tried the dark mode without `StyledEngineProvider`? — Abdulmuhaymin, Sep 27 '21 at 18:39
I have. Nothing changes. I don't have any customized theme or anything like that either — illyria, Sep 27 '21 at 18:41
@NearHuscarl I mean I could, what would you need? I tried to take everything out but the dark mode and the material UI Cards and still won't work though so I am not sure — illyria, Sep 28 '21 at 06:54
@FabioC I cannot reproduce the behavior you said with that snippet only. I need more context, specifically, my assumption is that you may import the component from v4 instead of v5 `material-ui/core` instead of `@mui/material` — NearHuscarl, Sep 28 '21 at 06:58
@NearHuscarl not trying to be extra, but I think I love you. I spent legit an entire day on it lol. That was exactly the problem. Thank you — illyria, Sep 28 '21 at 07:04

NearHuscarl · Accepted Answer · 2021-09-28T08:08:00.897

MUI v5 changed a lot of thing, including the brand name (Material-UI to MUI). They moved the material components to a new package called @mui/material. If you happen to import the component from v4, then it won't work with emotion - the default styling engine that comes in v5. So check your import path:

import Card from '@material-ui/core/Card'; // v4 - use JSS

import Card from '@mui/material/Card'; // v5 - use emotion by default

Material UI Dark Mode

1 Answers1

Linked