What are the required styles for a Material UI palette?

Question

I have some components that use the MuiThemeProvider to customize a button. The reason is probably because you can only have "primary" or "secondary" instead of a custom palette name. They look like this:

import React from "react";
import { badTheme } from "./Themes";
import {
    Button,
    MuiThemeProvider,
} from "@material-ui/core";

class Widget extends React.Component {
    render() {   
        return (
            <MuiThemeProvider theme={badTheme}>
                <Button color="primary">Click me</Button>
            </MuiThemeProvider>
        );
    }
}

export default Widget;

The badTheme here is just the app theme with an override for main in the primary palette.

const badTheme= createMuiTheme({
    ...defaultTheme,
    palette: {
        ...defaultTheme.palette,
        primary: {
            main: "#2B368B",
        },
    },
});

It would be nice to get rid of these little themes that just change a button, so I want to know what are all the styles I need to implement when switching to withStyles.

I don't want to lose the ripple style or any other style I'm not aware of that is seeded from setting main in the palette.

What does it take to replace MuiThemeProvider with withStyles, or whatever else, and having the exact same styles on this button that are seeded based on the main palette setting?

Answer 1

Each Button variant has its own color styles, which are defined in Button.js.

To create new button colors using withStyles (instead of the color prop), you will need to replicate the color-specific styles for the desired variant.

As of material-ui@3.1.1, these are the styles to create a custom button color for each variant.

Text buttons

Color styles for the default button variant. Based on .textPrimary
Note: These styles are also applied to the outlined variant.

textPink: {
  color: pink[500],
  "&:hover": {
    backgroundColor: fade(pink[500], theme.palette.action.hoverOpacity),
    // Reset on touch devices, it doesn't add specificity
    "@media (hover: none)": {
      backgroundColor: "transparent"
    }
  }
},

Outlined buttons

Color styles for outlined button variant. Based on .outlinedPrimary

outlinedPink: {
  border: `1px solid ${fade(pink[500], 0.5)}`,
  "&:hover": {
    border: `1px solid ${pink[500]}`
  },
  "&$disabled": {
    border: `1px solid ${theme.palette.action.disabled}`
  }
},

Contained Buttons

Color styles for contained/raised button variant. Based on .containedPrimary

containedPink: {
  color: theme.palette.getContrastText(pink[500]),
  backgroundColor: pink[500],
  "&:hover": {
    backgroundColor: pink[700],
    // Reset on touch devices, it doesn't add specificity
    "@media (hover: none)": {
      backgroundColor: pink[500]
    }
  }
}

Complete Example: