title: How to use Theme in material UI with React + Next.js?
body: <p>I created three files shown below.</p>
  
  <p>The color of <code>Paper</code> changes according to the value of <code>palette.type</code> defined in <code>theme.js</code>.  </p>
  
  <p>Page with palette.type: 'dark'</p>
  
  <p><a href="https://i.stack.imgur.com/d2LoB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d2LoB.png" alt="Page with palette.type: &#39;dark&#39;"></a>  </p>
  
  <p>Page with palette.type: 'light'</p>
  
  <p><a href="https://i.stack.imgur.com/FOho9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FOho9.png" alt="Page with palette.type: &#39;light&#39;"></a></p>
  
  <p>However, I don't understand how the variable <code>theme</code> works. I added two <code>console.log(theme)</code> to <code>index.js</code>. Both shows <code>palette.type: 'light'</code> regardless of the value in <code>theme.js</code>.</p>
  
  <p>Result of console.log</p>
  
  <p><a href="https://i.stack.imgur.com/1Tabl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Tabl.png" alt="Result of console.log"></a></p>
  
  <p>How can I pass <code>theme</code> to <code>index.js</code> (without importing theme)?</p>
  
  <p><strong>components/Layout.js</strong> - Shared component to apply the same layout to all pages</p>
  
  <pre><code>import React from 'react';
  import { MuiThemeProvider } from '@material-ui/core/styles';
  import { theme } from '../utils/theme';
  
  
  class Layout extends React.Component {
      render() {
          return(
              &lt;MuiThemeProvider theme={theme}&gt;
                  {this.props.children}
              &lt;/MuiThemeProvider&gt;
          )
      }
  }
  
  export default Layout;
  </code></pre>
  
  <p><strong>pages/index.js</strong> - One specific page</p>
  
  <pre><code>import Layout from '../components/Layout';
  import { makeStyles, createStyles, useTheme, Paper } from '@material-ui/core';
  
  const useStyles = makeStyles(theme =&gt; {
      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(
          &lt;Layout&gt;
              &lt;h2&gt;About&lt;/h2&gt;
              &lt;Paper className={classes.container}&gt;
                  &lt;p&gt;Sample test&lt;/p&gt;
              &lt;/Paper&gt;
              &lt;Paper className={classes.container}&gt;
                  &lt;p&gt;Sample test2&lt;/p&gt;
              &lt;/Paper&gt;
          &lt;/Layout&gt;
      )
  };
  </code></pre>
  
  <p><strong>utils/theme.js</strong> - Separate file to write <code>theme</code></p>
  
  <pre><code>import { createMuiTheme } from '@material-ui/core/styles';
  
  export const theme = createMuiTheme({
      palette: {
          type: 'dark'
      }
  });
  </code></pre>