title: Adding custom Theme not working in Material UI v5
body: <p>I made a custom theme following the docs line by line but there are no changes in my UI</p>
  <p>The primary and secondary colours are the same as default and don't know how my other colours(warning, info, error) are not working from the start(before adding these custom colours).</p>
  <p>for eg: In my <code>&lt;Button&gt;</code> tag, if I add <code>color=&quot;info&quot;</code>, it gives the default white colour</p>
  <p><em><strong>Note</strong>: I haven't used <code>create-react-app</code> so my file structure is a bit different`</em></p>
  <p><em>*Screenshots &amp; Repository link in the end</em></p>
  <p>Here are my files:</p>
  <ol>
  <li>My theme file</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>import { createTheme } from &quot;@mui/material/styles&quot;;
  import {
      blue,
      lightBlue,
      lightGreen,
      red,
      teal,
      yellow,
  } from &quot;@mui/material/colors&quot;;
  
  const theme = createTheme({
      palette: {
          primary: {
              main: blue[&quot;A400&quot;],
          },
          secondary: {
              main: teal[400],
          },
          error: {
              main: red[500],
          },
          warning: {
              main: yellow[&quot;A200&quot;],
          },
          info: {
              main: lightBlue[200],
          },
          success: {
              main: lightGreen[600],
          },
      },
  });
  
  export default theme;
  </code></pre>
  <ol start="2">
  <li>In my App component, there is <code>Router</code> component which is wrapped by ThemeProvider</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { render } from &quot;react-dom&quot;;
  import Router from &quot;./Router&quot;;
  import { ThemeProvider } from &quot;@mui/material/styles&quot;;
  import theme from &quot;../theme/Pallette&quot;;
  
  function App() {
      return (
          &lt;ThemeProvider theme={theme}&gt;
              &lt;Router /&gt;
          &lt;/ThemeProvider&gt;
      );
  }
  
  export default App;
  
  const appDiv = document.getElementById(&quot;app&quot;);
  
  render(&lt;App /&gt;, appDiv);
  </code></pre>
  <br/>
  <p>I tried logging my theme object and it gave the correct output</p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;breakpoints&quot;: {
      &quot;keys&quot;: [
        &quot;xs&quot;,
        &quot;sm&quot;,
        &quot;md&quot;,
        &quot;lg&quot;,
        &quot;xl&quot;
      ],
      &quot;values&quot;: {
        &quot;xs&quot;: 0,
        &quot;sm&quot;: 600,
        &quot;md&quot;: 900,
        &quot;lg&quot;: 1200,
        &quot;xl&quot;: 1536
      },
      &quot;unit&quot;: &quot;px&quot;
    },
    &quot;direction&quot;: &quot;ltr&quot;,
    &quot;components&quot;: {},
    &quot;palette&quot;: {
      &quot;mode&quot;: &quot;light&quot;,
      &quot;primary&quot;: {
        &quot;main&quot;: &quot;#2979ff&quot;,
        &quot;light&quot;: &quot;rgb(83, 147, 255)&quot;,
        &quot;dark&quot;: &quot;rgb(28, 84, 178)&quot;,
        &quot;contrastText&quot;: &quot;#fff&quot;
      },
      &quot;secondary&quot;: {
        &quot;main&quot;: &quot;#26a69a&quot;,
        &quot;light&quot;: &quot;rgb(81, 183, 174)&quot;,
        &quot;dark&quot;: &quot;rgb(26, 116, 107)&quot;,
        &quot;contrastText&quot;: &quot;#fff&quot;
      },
      &quot;error&quot;: {
        &quot;main&quot;: &quot;#f44336&quot;,
        &quot;light&quot;: &quot;rgb(246, 104, 94)&quot;,
        &quot;dark&quot;: &quot;rgb(170, 46, 37)&quot;,
        &quot;contrastText&quot;: &quot;#fff&quot;
      },
      &quot;warning&quot;: {
        &quot;main&quot;: &quot;#ffff00&quot;,
        &quot;light&quot;: &quot;rgb(255, 255, 51)&quot;,
        &quot;dark&quot;: &quot;rgb(178, 178, 0)&quot;,
        &quot;contrastText&quot;: &quot;rgba(0, 0, 0, 0.87)&quot;
      },
      &quot;info&quot;: {
        &quot;main&quot;: &quot;#81d4fa&quot;,
        &quot;light&quot;: &quot;rgb(154, 220, 251)&quot;,
        &quot;dark&quot;: &quot;rgb(90, 148, 175)&quot;,
        &quot;contrastText&quot;: &quot;rgba(0, 0, 0, 0.87)&quot;
      },
      &quot;success&quot;: {
        &quot;main&quot;: &quot;#7cb342&quot;,
        &quot;light&quot;: &quot;rgb(150, 194, 103)&quot;,
        &quot;dark&quot;: &quot;rgb(86, 125, 46)&quot;,
        &quot;contrastText&quot;: &quot;rgba(0, 0, 0, 0.87)&quot;
      },
      &quot;common&quot;: {
        &quot;black&quot;: &quot;#000&quot;,
        &quot;white&quot;: &quot;#fff&quot;
      },
      &quot;grey&quot;: {
        &quot;50&quot;: &quot;#fafafa&quot;,
        &quot;100&quot;: &quot;#f5f5f5&quot;,
        &quot;200&quot;: &quot;#eeeeee&quot;,
        &quot;300&quot;: &quot;#e0e0e0&quot;,
        &quot;400&quot;: &quot;#bdbdbd&quot;,
        &quot;500&quot;: &quot;#9e9e9e&quot;,
        &quot;600&quot;: &quot;#757575&quot;,
        &quot;700&quot;: &quot;#616161&quot;,
        &quot;800&quot;: &quot;#424242&quot;,
        &quot;900&quot;: &quot;#212121&quot;,
        &quot;A100&quot;: &quot;#f5f5f5&quot;,
        &quot;A200&quot;: &quot;#eeeeee&quot;,
        &quot;A400&quot;: &quot;#bdbdbd&quot;,
        &quot;A700&quot;: &quot;#616161&quot;
      },
      &quot;contrastThreshold&quot;: 3,
      &quot;tonalOffset&quot;: 0.2,
      &quot;text&quot;: {
        &quot;primary&quot;: &quot;rgba(0, 0, 0, 0.87)&quot;,
        &quot;secondary&quot;: &quot;rgba(0, 0, 0, 0.6)&quot;,
        &quot;disabled&quot;: &quot;rgba(0, 0, 0, 0.38)&quot;
      },
      &quot;divider&quot;: &quot;rgba(0, 0, 0, 0.12)&quot;,
      &quot;background&quot;: {
        &quot;paper&quot;: &quot;#fff&quot;,
        &quot;default&quot;: &quot;#fff&quot;
      },
      &quot;action&quot;: {
        &quot;active&quot;: &quot;rgba(0, 0, 0, 0.54)&quot;,
        &quot;hover&quot;: &quot;rgba(0, 0, 0, 0.04)&quot;,
        &quot;hoverOpacity&quot;: 0.04,
        &quot;selected&quot;: &quot;rgba(0, 0, 0, 0.08)&quot;,
        &quot;selectedOpacity&quot;: 0.08,
        &quot;disabled&quot;: &quot;rgba(0, 0, 0, 0.26)&quot;,
        &quot;disabledBackground&quot;: &quot;rgba(0, 0, 0, 0.12)&quot;,
        &quot;disabledOpacity&quot;: 0.38,
        &quot;focus&quot;: &quot;rgba(0, 0, 0, 0.12)&quot;,
        &quot;focusOpacity&quot;: 0.12,
        &quot;activatedOpacity&quot;: 0.12
      }
    },
    &quot;shape&quot;: {
      &quot;borderRadius&quot;: 4
    },
    &quot;mixins&quot;: {
      &quot;toolbar&quot;: {
        &quot;minHeight&quot;: 56,
        &quot;@media (min-width:0px) and (orientation: landscape)&quot;: {
          &quot;minHeight&quot;: 48
        },
        &quot;@media (min-width:600px)&quot;: {
          &quot;minHeight&quot;: 64
        }
      }
    },
    &quot;shadows&quot;: [
      &quot;none&quot;,
      &quot;0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)&quot;,
      &quot;0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)&quot;,
      &quot;0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)&quot;,
      &quot;0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)&quot;,
      &quot;0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)&quot;,
      &quot;0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)&quot;,
      &quot;0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)&quot;,
      &quot;0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)&quot;,
      &quot;0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)&quot;,
      &quot;0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)&quot;,
      &quot;0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)&quot;,
      &quot;0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)&quot;,
      &quot;0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)&quot;,
      &quot;0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)&quot;,
      &quot;0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)&quot;,
      &quot;0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)&quot;,
      &quot;0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)&quot;,
      &quot;0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)&quot;,
      &quot;0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)&quot;,
      &quot;0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)&quot;,
      &quot;0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)&quot;,
      &quot;0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)&quot;,
      &quot;0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)&quot;,
      &quot;0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)&quot;
    ],
    &quot;typography&quot;: {
      &quot;htmlFontSize&quot;: 16,
      &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
      &quot;fontSize&quot;: 14,
      &quot;fontWeightLight&quot;: 300,
      &quot;fontWeightRegular&quot;: 400,
      &quot;fontWeightMedium&quot;: 500,
      &quot;fontWeightBold&quot;: 700,
      &quot;h1&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 300,
        &quot;fontSize&quot;: &quot;6rem&quot;,
        &quot;lineHeight&quot;: 1.167,
        &quot;letterSpacing&quot;: &quot;-0.01562em&quot;
      },
      &quot;h2&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 300,
        &quot;fontSize&quot;: &quot;3.75rem&quot;,
        &quot;lineHeight&quot;: 1.2,
        &quot;letterSpacing&quot;: &quot;-0.00833em&quot;
      },
      &quot;h3&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 400,
        &quot;fontSize&quot;: &quot;3rem&quot;,
        &quot;lineHeight&quot;: 1.167,
        &quot;letterSpacing&quot;: &quot;0em&quot;
      },
      &quot;h4&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 400,
        &quot;fontSize&quot;: &quot;2.125rem&quot;,
        &quot;lineHeight&quot;: 1.235,
        &quot;letterSpacing&quot;: &quot;0.00735em&quot;
      },
      &quot;h5&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 400,
        &quot;fontSize&quot;: &quot;1.5rem&quot;,
        &quot;lineHeight&quot;: 1.334,
        &quot;letterSpacing&quot;: &quot;0em&quot;
      },
      &quot;h6&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 500,
        &quot;fontSize&quot;: &quot;1.25rem&quot;,
        &quot;lineHeight&quot;: 1.6,
        &quot;letterSpacing&quot;: &quot;0.0075em&quot;
      },
      &quot;subtitle1&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 400,
        &quot;fontSize&quot;: &quot;1rem&quot;,
        &quot;lineHeight&quot;: 1.75,
        &quot;letterSpacing&quot;: &quot;0.00938em&quot;
      },
      &quot;subtitle2&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 500,
        &quot;fontSize&quot;: &quot;0.875rem&quot;,
        &quot;lineHeight&quot;: 1.57,
        &quot;letterSpacing&quot;: &quot;0.00714em&quot;
      },
      &quot;body1&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 400,
        &quot;fontSize&quot;: &quot;1rem&quot;,
        &quot;lineHeight&quot;: 1.5,
        &quot;letterSpacing&quot;: &quot;0.00938em&quot;
      },
      &quot;body2&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 400,
        &quot;fontSize&quot;: &quot;0.875rem&quot;,
        &quot;lineHeight&quot;: 1.43,
        &quot;letterSpacing&quot;: &quot;0.01071em&quot;
      },
      &quot;button&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 500,
        &quot;fontSize&quot;: &quot;0.875rem&quot;,
        &quot;lineHeight&quot;: 1.75,
        &quot;letterSpacing&quot;: &quot;0.02857em&quot;,
        &quot;textTransform&quot;: &quot;uppercase&quot;
      },
      &quot;caption&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 400,
        &quot;fontSize&quot;: &quot;0.75rem&quot;,
        &quot;lineHeight&quot;: 1.66,
        &quot;letterSpacing&quot;: &quot;0.03333em&quot;
      },
      &quot;overline&quot;: {
        &quot;fontFamily&quot;: &quot;\&quot;Roboto\&quot;, \&quot;Helvetica\&quot;, \&quot;Arial\&quot;, sans-serif&quot;,
        &quot;fontWeight&quot;: 400,
        &quot;fontSize&quot;: &quot;0.75rem&quot;,
        &quot;lineHeight&quot;: 2.66,
        &quot;letterSpacing&quot;: &quot;0.08333em&quot;,
        &quot;textTransform&quot;: &quot;uppercase&quot;
      }
    },
    &quot;transitions&quot;: {
      &quot;easing&quot;: {
        &quot;easeInOut&quot;: &quot;cubic-bezier(0.4, 0, 0.2, 1)&quot;,
        &quot;easeOut&quot;: &quot;cubic-bezier(0.0, 0, 0.2, 1)&quot;,
        &quot;easeIn&quot;: &quot;cubic-bezier(0.4, 0, 1, 1)&quot;,
        &quot;sharp&quot;: &quot;cubic-bezier(0.4, 0, 0.6, 1)&quot;
      },
      &quot;duration&quot;: {
        &quot;shortest&quot;: 150,
        &quot;shorter&quot;: 200,
        &quot;short&quot;: 250,
        &quot;standard&quot;: 300,
        &quot;complex&quot;: 375,
        &quot;enteringScreen&quot;: 225,
        &quot;leavingScreen&quot;: 195
      }
    },
    &quot;zIndex&quot;: {
      &quot;mobileStepper&quot;: 1000,
      &quot;fab&quot;: 1050,
      &quot;speedDial&quot;: 1050,
      &quot;appBar&quot;: 1100,
      &quot;drawer&quot;: 1200,
      &quot;modal&quot;: 1300,
      &quot;snackbar&quot;: 1400,
      &quot;tooltip&quot;: 1500
    }
  }
  </code></pre>
  <p>But there is <strong>no change</strong> in the colours of my UI</p>
  <p>What am I doing wrong here?</p>
  <p>Here is my <code>package.json</code> :</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;name&quot;: &quot;frontend&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;description&quot;: &quot;&quot;,
      &quot;main&quot;: &quot;index.js&quot;,
      &quot;scripts&quot;: {
          &quot;dev&quot;: &quot;webpack --mode development --watch&quot;,
          &quot;build&quot;: &quot;webpack --mode production&quot;
      },
      &quot;keywords&quot;: [],
      &quot;author&quot;: &quot;&quot;,
      &quot;license&quot;: &quot;ISC&quot;,
      &quot;devDependencies&quot;: {
          &quot;@babel/core&quot;: &quot;^7.17.10&quot;,
          &quot;@babel/preset-env&quot;: &quot;^7.17.10&quot;,
          &quot;@babel/preset-react&quot;: &quot;^7.16.7&quot;,
          &quot;babel-loader&quot;: &quot;^8.2.5&quot;,
          &quot;react&quot;: &quot;^17.0.2&quot;,
          &quot;react-dom&quot;: &quot;^17.0.2&quot;,
          &quot;webpack&quot;: &quot;^5.72.0&quot;,
          &quot;webpack-cli&quot;: &quot;^4.9.2&quot;
      },
      &quot;dependencies&quot;: {
          &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.16.7&quot;,
          &quot;@emotion/react&quot;: &quot;^11.9.0&quot;,
          &quot;@emotion/styled&quot;: &quot;^11.8.1&quot;,
          &quot;@material-ui/icons&quot;: &quot;^4.11.3&quot;,
          &quot;@mui/material&quot;: &quot;^5.7.0&quot;,
          &quot;react-router-dom&quot;: &quot;^6.3.0&quot;
      }
  }
  </code></pre>
  <p>The left radio button is primary</p>
  <p><a href="https://i.stack.imgur.com/xSacH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xSacH.png" alt="enter image description here" /></a></p>
  <p>And left radio button is secondary</p>
  <p><a href="https://i.stack.imgur.com/zcWoM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zcWoM.png" alt="enter image description here" /></a></p>
  <p>The <code>Settings</code> button is 'info'</p>
  <p><a href="https://i.stack.imgur.com/kS4XD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kS4XD.png" alt="enter image description here" /></a></p>
  <p>Github Repo link <a href="https://github.com/YASHBRO/Sing-in-Sync/tree/development" rel="nofollow noreferrer">here : https://github.com/YASHBRO/Sing-in-Sync/tree/development</a></p>