MUI Theme with Custom Colors

ThemeProvider.tsx

// REF: https://material-ui.com/customization/palette/#adding-new-colors

import { FC } from "react"
import {
  ThemeProvider as MuiThemeProvider,
  createMuiTheme,
  responsiveFontSizes,
} from "@material-ui/core"

// include these here so the compiler can add the types
declare module "@material-ui/core/styles/createMuiTheme" {
  interface Theme {
    status: {
      danger: React.CSSProperties["color"]
    }
  }
  interface ThemeOptions {
    status: {
      danger: React.CSSProperties["color"]
    }
  }
}

declare module "@material-ui/core/styles/createPalette" {
  interface Palette {
    neutral: Palette["primary"]
  }
  interface PaletteOptions {
    neutral: PaletteOptions["primary"]
  }
}

const ThemeProvider: FC = ({ children }) => {
  const theme = responsiveFontSizes(
    createMuiTheme({
      // Custom color outside of palette
      status: {
        danger: "#e53e3e",
      },

      palette: {
        primary: {
          main: "#006d77",
          contrastText: "#FFFFFF",
        },

        // Custom color under palette
        neutral: {
          main: "#bf1313",
        },
      },
    })
  )

  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
}

export default ThemeProvider