Can we add new property for color in palette in MuiTheme

Like MuiTheme already provided a way to override colors of 3 property

• Primary

• Secondary

• error

This is the below way to change the colors of existing properties.

palette: {
  primary: {
    main: palette.primary[500],
  },
  secondary: {
    main: palette.secondary.A400,
  },
  error: {
    main: palette.error[500],
  },
},

What If we need to define new property for color like

palette: {
  primary: {
    main: palette.primary[500],
  },
  secondary: {
    main: palette.secondary.A400,
  },
  error: {
    main: palette.error[500],
  },

>   success : {
>     main : "#bac778"
>   }

},

Is that possible ?

[oliviertassinari]

@davidcalhoun Yes, you are right, this issue is about extending the Button implementation so people can just do:

const theme = createMuiTheme({
  palette: {
    success: {
      main : "#bac778",
    },
  },
})

then have a working:

<Button color="success" />

implementation.

The best solution right now is to add the color in the theme, then to create a wrapping component:

import React from "react";
import { withStyles, ThemeProvider } from "@material-ui/styles";
import MuiButton from "@material-ui/core/Button";
import { createMuiTheme } from "@material-ui/core/styles";

const Button = withStyles(theme => ({
  root: props =>
    props.color === "success" && props.variant === "contained"
      ? {
          color: theme.palette.success.contrastText,
          backgroundColor: theme.palette.success.main,
          "&:hover": {
            backgroundColor: theme.palette.success.dark,
            // Reset on touch devices, it doesn't add specificity
            "@media (hover: none)": {
              backgroundColor: theme.palette.success.main
            }
          }
        }
      : {}
}))(MuiButton);

const theme = createMuiTheme();

theme.palette.success = theme.palette.augmentColor({
  main: "#689f38"
});

function Theming() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
        primary
      </Button>
      <Button variant="contained" color="success">
        success
      </Button>
    </ThemeProvider>
  );
}

export default Theming;

https://codesandbox.io/s/7zmw6ox8m1

---

By the way, we are planing on extending the color to primary | secondary | success | warning | error/danger? | info. Would that help in your case?

[kushal-tech]

Yes I can but I cannot use it like <Button color="success">Login</Button>

It gives warning about to use only primary default secondary