CODEWITHSUNDEEP
reactjsmaterial-uinext.js
illyria
illyria

Reputation: 394

Material UI Dark Mode

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:

enter image description here enter image description here

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

enter image description here enter image description here

Upvotes: 1

Views: 2877

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81370

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

Upvotes: 2

Related Questions