How to add multiple Material UI palette colors

Question

I\'m trying to establish my own palette colors to match my branding in Material UI. So far I can only get the primary and secondary colors to work when applied as the background

Answer 1

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.