How to use Theme in material UI with React + Next.js?

Question

I created three files shown below.

The color of Paper changes according to the value of palette.type defined in theme.js.

Page with palette.type: 'dark'

Page with palette.type: 'light'

However, I don't understand how the variable theme works. I added two console.log(theme) to index.js. Both shows palette.type: 'light' regardless of the value in theme.js.

Result of console.log

How can I pass theme to index.js (without importing theme)?

components/Layout.js - Shared component to apply the same layout to all pages

import React from 'react';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { theme } from '../utils/theme';


class Layout extends React.Component {
    render() {
        return(
            <MuiThemeProvider theme={theme}>
                {this.props.children}
            </MuiThemeProvider>
        )
    }
}

export default Layout;

pages/index.js - One specific page

import Layout from '../components/Layout';
import { makeStyles, createStyles, useTheme, Paper } from '@material-ui/core';

const useStyles = makeStyles(theme => {
    console.log('inside makeStyles');
    console.log(theme);
    return createStyles({
        container: {
            margin: '5px 5px 50px 5px'
        }
    })
});

export default function Index(props) {
    const classes = useStyles(props);
    const theme = useTheme();
    console.log('inside Index')
    console.log(theme);

    return(
        <Layout>
            <h2>About</h2>
            <Paper className={classes.container}>
                <p>Sample test</p>
            </Paper>
            <Paper className={classes.container}>
                <p>Sample test2</p>
            </Paper>
        </Layout>
    )
};

utils/theme.js - Separate file to write theme

import { createMuiTheme } from '@material-ui/core/styles';

export const theme = createMuiTheme({
    palette: {
        type: 'dark'
    }
});

On your screenshot, theme is only applied to the Paper, however it also should change background color of the page if used correctly. — Nikolai Kiselev
– Nikolai Kiselev, Commented Apr 4, 2020 at 9:08

Nikolai Kiselev · Accepted Answer · 2020-04-04 10:53:33Z

6

Try to move <MuiThemeProvider theme={theme}> from Layout.js to _app.js.

_app.js

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../src/theme';

export default function MyApp(props) {
const { Component, pageProps } = props;

React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
        jssStyles.parentElement.removeChild(jssStyles);
    }
}, []);

return (
    <React.Fragment>
    <Head>
        <title>My page</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
    </Head>
    <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
    </ThemeProvider>
    </React.Fragment>
);
}

MyApp.propTypes = {
    Component: PropTypes.func.isRequired,
    pageProps: PropTypes.object.isRequired,
};

Theme should apply to all components and you should see dark in the console.log() print.

Official Material-UI + Next.js example

If all pages share the same layout you can remove Layout component completely.

edited Apr 4, 2020 at 10:53

answered Apr 4, 2020 at 8:41

Nikolai Kiselev

6,6532 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dmjy Over a year ago

Adding pages/_app.js actually works! I have one extra question. Do you have any advice about how to use components/Layout.js and pages/_app.js? They now work in a similar way. (Official page: nextjs.org/docs/advanced-features/custom-app)

Nikolai Kiselev Over a year ago

@dmjy, I've added it to the end of the answer. Having both Layout and _app.js doesn't provide any benefits unless there are several layouts in the app.

Zack Walton Over a year ago

The Nextjs 13 example is now here: github.com/mui/material-ui/tree/master/examples/…

Collectives™ on Stack Overflow

How to use Theme in material UI with React + Next.js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related