Setting additional colors in theme Material UI React

Question

I am trying to look for documentation or code example how can I specify addition colors in Material UI theme.

Right now I have following theme configuration

const theme = createMuiTheme({
    palette: {
        primary: {
            main: "#B31728"
        },
        secondary: {
            main: "#202833"
        }
    },
    ...

Now I have a case where I want to use a color for successful operations such as

import { green } from "@material-ui/core/colors";

<Fragment>
    {isVerified ? (
        <VerifiedUser style={{ color: green[500] }} />
    ) : (
        <Error color="primary" />
    )}
</Fragment>

I want to set the color of VerifiedUser Icon in the same way it is set for Error Icon. But the theme palette configuration only has primary and secondary intentions. How can I set a color lets say "success" so that I can be able to pass it like

<VerifiedUser color="success" />

Answer 1

For Material-UI, you can only assign inherit primary secondary default to color, you can customize primary and secondary through createMuiTheme.

To apply your custom theme into component, use MuiThemeProvider :

<MuiThemeProvider theme={theme}>
  //your component
</MuiThemeProvider>

Therefore, if you want to generate green theme component, you can create a theme, then use MuiThemeProvider to wrap your component.

Code sample(generate green button):

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const theme = createMuiTheme({
  palette: {
    primary: { main: '#00FF00' }
});

function GreenButton() {
  return (
    <MuiThemeProvider theme={theme}>
      <Button color="primary">This is green button</Button>
    </MuiThemeProvider>
  );
}

Further reading: Customize Material-UI with your theme