title: Material UI and Next.js - dynamic styles not working
body: <p>I am using Next JS with Material UI, and I set up the project using the example from the docs on Github: <a href="https://github.com/mui-org/material-ui/tree/master/examples/nextjs" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/tree/master/examples/nextjs</a></p>
  <p>My goal is to use Material UI's styling solution to create custom theme. I want to use custom theme colors like &quot;red&quot;, &quot;green&quot;, &quot;blue&quot;, &quot;yellow, on top of the existing &quot;primary&quot; and &quot;secondary&quot; for Buttons. So following this <a href="https://material-ui.com/styles/basics/#adapting-the-styled-components-api" rel="nofollow noreferrer">example</a> from the docs, I made this CustomButton component:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import Button from &quot;@material-ui/core/Button&quot;;
  
  // const random = &quot;just some random thing&quot;
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      background: (props) =&gt; theme.palette[props.color].main,
      height: 48,
      padding: &quot;0 30px&quot;,
      margin: 8,
    },
  }));
  
  const CustomButton = React.forwardRef((props, ref) =&gt; {
    const { color, ...other } = props;
    const classes = useStyles(props);
    return &lt;Button ref={ref} className={classes.root} {...other} /&gt;;
  })
  
  CustomButton.propTypes = {
    color: PropTypes.oneOf([&quot;blue&quot;, &quot;red&quot;]).isRequired,
  };
  
  export default CustomButton
  </code></pre>
  <p>here is my <code>theme.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import { createTheme } from '@material-ui/core/styles';
  import { red } from '@material-ui/core/colors';
  
  // Create a theme instance.
  const theme = createTheme({
    palette: {
      primary: {
        main: '#fff',
        contrastText: &quot;#494949&quot;
      },
      secondary: {
        main: '#19857b',
      },
      error: {
        main: red.A400,
      },
      background: {
        default: '#f1f1f1',
      },
      red: {
        main: &quot;#FF5E58&quot;,
      },
      green: {
        main: &quot;#009A2B&quot;
      },
      blue: {
        main: &quot;#0082FF&quot;
      },
      yellow: {
        main: &quot;#FFB800&quot;
      }
      
    },
    mixins: {
      toolbar: {
        minHeight: 70
      }
    },
    overrides: {
      MuiCssBaseline: {
        '@global': {
          html: {
            &quot;scroll-behavior&quot;: &quot;smooth&quot;
          },
        },
      },
    },
  });
  
  export default theme;
  </code></pre>
  <p>In my Layout file where the Appbar is located I have a <code>NAV_ITEMS</code> object which I am looping through:</p>
  <pre class="lang-js prettyprint-override"><code>const NAV_ITEMS = [
    {
      title: &quot;About&quot;,
      link: &quot;/about&quot;,
      color: &quot;red&quot;,
    },
    {
      title: &quot;Projects&quot;,
      link: &quot;/projects&quot;,
      color: &quot;yellow&quot;,
    },
    {
      title: &quot;Toolbox&quot;,
      link: &quot;/toolbox&quot;,
      color: &quot;green&quot;,
    },
    {
      title: &quot;Events&quot;,
      link: &quot;/events&quot;,
      color: &quot;blue&quot;,
    },
    {
      title: &quot;Textbook&quot;,
      link: &quot;/textbook&quot;,
      color: &quot;red&quot;,
    },
    {
      title: &quot;Login&quot;,
      link: &quot;/login&quot;,
      color: &quot;yellow&quot;,
    },
    {
      title: &quot;Random&quot;,
      link: &quot;/random&quot;,
      color: &quot;blue&quot;,
    },
  ];
  </code></pre>
  <pre class="lang-js prettyprint-override"><code> {NAV_ITEMS.map((item) =&gt; (
                  &lt;Link href={item.link} key={item.title} passHref&gt;
                    &lt;CustomButton color={item.color}&gt;{item.title}&lt;/CustomButton&gt;
                  &lt;/Link&gt;
                ))}
  </code></pre>
  <p>Now I am facing a weird bug where whenever I save a file while running &quot;npm run dev&quot;, I see the correctly rendered Buttons, but when I refresh the page, the colors are all wrong and I get the following console error:</p>
  <pre><code>react-dom.development.js:67 Warning: Prop `className` did not match. Server: &quot;MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-root-27 makeStyles-root-28&quot; Client: &quot;MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-root-27 makeStyles-root-29&quot;
  </code></pre>
  <p>Here is a screenrecord of the error:</p>
  <p><a href="https://i.stack.imgur.com/Sf86f.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sf86f.gif" alt="enter image description here" /></a></p>
  <p>I am guessing the error is happening because of a mismatch between server-side rendered styles and client-side rendered styles, as you can see two different makeStyles on each element:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;a class=&quot;MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-root-27 makeStyles-root-32&quot; tabindex=&quot;0&quot; aria-disabled=&quot;false&quot; href=&quot;/textbook&quot;&gt;&lt;span class=&quot;MuiButton-label&quot;&gt;Textbook&lt;/span&gt;&lt;span class=&quot;MuiTouchRipple-root&quot;&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  <p>How could I make this prop-based styling work on Next JS?</p>