Setting additional colors in theme Material UI React

9
votes

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" />
2
reactjsmaterial-ui
I don't know if this is what you are looking for, but as shown in the examples (codesandbox.io/s/z24r4218r3) you can add custom stuff outside of palette. Handling this as color property on you components would require you to implement this yourself and the material-ui components wouldn't know of this custom colors. – Jan P

2 Answers

4
votes

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

2
votes

This isn't as elegant as being able to just do color="success", but the code below will allow you to do something like:

<SuccessThemeProvider>
  <Button color="primary" variant="contained">
    Success
  </Button>
</SuccessThemeProvider>

Here's the full code example:

import React from "react";
import ReactDOM from "react-dom";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import green from "@material-ui/core/colors/green";
import Button from "@material-ui/core/Button";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#B31728"
    },
    secondary: {
      main: "#202833"
    },
    success: {
      main: green[500],
      contrastText: "#fff"
    }
  }
});
const successThemePalette = { primary: theme.palette.success };
const successTheme = createMuiTheme({ ...theme, palette: successThemePalette });
const SuccessThemeProvider = props => {
  return (
    <MuiThemeProvider theme={successTheme}>{props.children}</MuiThemeProvider>
  );
};
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <div className="App">
        <Button color="primary" variant="contained">
          Primary
        </Button>
        <Button color="secondary" variant="contained">
          Secondary
        </Button>
        <SuccessThemeProvider>
          <Button color="primary" variant="contained">
            Success
          </Button>
        </SuccessThemeProvider>
      </div>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit 3q77qk6xkq