title: How do I extend the color palette from mui with Typescript
body: <p>I'm trying to extend the color palette that mui provides. The overriding of primary, secondary etc colors works well but if I want to create a custom set of colors just after, I can't figure out how to make it works. There are plenty of examples without typescript but when this guy comes into the game it makes it trickier. Let's say I have this:</p>
  <p>theme.tsx</p>
  <pre><code>palette: {
    primary: {...}, // override works
    custom: { 
      main: 'color', 
      dark: 'color1', 
      light: 'color2', 
      contrastText: 'color3' 
    }
  }
  </code></pre>
  <p>from what mui document says, I should use module augmentation:</p>
  <pre><code>declare module &quot;@material-ui/core/styles/createPalette&quot; {
    interface Palette {
      custom: Palette['primary'];
    }
    interface PaletteOptions {
      custom: PaletteOptions['primary'];
    }
  }
  </code></pre>
  <p>Nothing is yelling, but when I use it for a Box component for example, it doesn't work (others like primary.dark works well). It's been several days that I'm trying to find out how to do this, but I have to say I'm out of knowledge there.</p>
  <p>I'd appreciate some help! Thanks! :)</p>
  <p>Ps: Someone already posted the same question but it didn't help me <a href="https://stackoverflow.com/questions/61097813/how-can-i-extend-color-palette-in-material-ui-with-typescript">here</a></p>