How to add custom MUI palette colors

Solution 1:

MUI palette can be extendable, but you need to do a couple of things to create a new color and apply to your Button component.

First, let define a theme with a the custom color variable. You can use augmentColor() to generate the PaletteColor so it can be consumed in your Button:

import { purple } from "@mui/material/colors";

const { palette } = createTheme();
const theme = createTheme({
  palette: {
    myAwesomeColor: palette.augmentColor({ color: purple }),
    // Use this code if you want to use an arbitrary color
    // myAwesomeColor: palette.augmentColor({
    //   color: {
    //     main: "#00ff00"
    //   }
    // })
  }
});

Then update your typescript definition so it can recognize the property myAwesomeColor when referencing the Palette and PaletteOption objects (skip this step if you're using JS). You also need to extend the Button's color props definition because by default it only accepts the following values:

'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'

declare module "@mui/material/styles" {
  interface Palette {
    myAwesomeColor: string;
  }
  interface PaletteOptions {
    myAwesomeColor: string;
  }
}

declare module "@mui/material/Button" {
  interface ButtonPropsColorOverrides {
    myAwesomeColor: true;
  }
}

The final step is inject the custom theme and set the custom color for your Button:

<ThemeProvider theme={theme}>
  <Button color="myAwesomeColor" variant="contained">
    AWESOME
  </Button>
</ThemeProvider>

Live Demo

Related answer

• Change primary and secondary colors in MUI

Solution 2:

Other than needing to change purple in your MyTheme to be something like purple[500], I'm not sure why this wouldn't work for you. Are you sure you can override anything other than the primary and secondary in this way?

Regardless, here's a workaround:

In MyTheme.js:

accent: { backgroundColor: purple[500], color: '#000' }

Then in App.js:

<Button 
  variant="raised" 
  style={MyTheme.palette.accent} 
  className={classes.primary}>
    Accent
</Button>

Working example here.