The Complete Guide to Material-UI Button Color (using MUI v5)

MUI Button color is a core aspect of proper theming. Fortunately MUI 5 (previously branded as Material-UI) makes it easy to apply the color you want. I will also include Material-UI v4 styling techniques for Buttons where there is a version difference.

There are a variety of ways to apply the color you need for your MUI Button. Some available methods target a specific file or Button component, while others override all Buttons affected by a custom theme.

A Code Sandbox link is in the Resources section.

Set Button Color By Variant With The MUI SX Prop

If you need to style a Button in just one place (or a few), you might want to style using the sx prop. It is new in MUI 5 and replaces the makeStyles hook syntax. The sx prop impressed me while I was testing it out; it can do everything the previous styling syntax could do, there are some new shortcuts, and there’s a lot less boiler-plate code.

There are three commonly used button variants: text, contained, and outlined. It’s also possible to create a custom variant in MUI 5. I am going to show how selectors can be used in the sx prop to get really specific. I also show how to minimize the amount of code.

const styles = {
  "&.MuiButton-root": {
    border: "2px black solid"
  },
  "&.MuiButton-text": {
    color: "grey"
  },
  "&.MuiButton-contained": {
    color: "yellow"
  },
  "&.MuiButton-outlined": {
    color: "brown"
  }
};

//JSX
<Button
  //just an example...better to use the const above
  sx={{
    "&.MuiButton-text": { color: "#808080" },
      border: "2px black solid"
    }}
  variant="text"

>
  Text
</Button>
<Button sx={styles} variant="contained">
  Contained
</Button>
<Button sx={styles} variant="outlined">
  Outlined
</Button>

I styled all three variants with a border, and then I targeted DOM classes specific to each variant. Keep in mind this might be overkill, I could have simply in-lined each color, but the above gives flexibility (and it’s a great example in case you need to style other components).

For the first Button, I wrote the styling inline in the sx prop. This is simply to show how it’s done. However, consider that you may have a handful of buttons and you are not yet sure of the variants for each…how do you avoid repetitive code?

The answer is to put the styling in a const and simply use that const in the sx prop. All the buttons can use the const in their sx prop regardless of their variant. When the variant changes, the proper selectors will kick in and select the appropriate DOM class.

MUI Button sx prop

Notice how the color and border styling are applied in dev tools in the screenshot above.

In my code, I targeted the following selector for each variant in order to change the text color:

  • Text variant: .MuiButton-text
  • Contained variant: .MuiButton-contained
  • Outlined variant: .MuiButton-outlined

Set Button Color With Classes And makeStyles (Deprecated)

The makeStyles hook is now considered “legacy” since MUI v5 came out, but it is useful to compare makeStyles to sx. Styling via classes will be contained to just one file.

I used the same styles as in the sx example above. Notice how much more complex the syntax is, plus I had to import makeStyles from @mui/styles.

//styles
const useStyles = makeStyles((theme) => {
  return {
    root: {
      "&.MuiButton-root": {
        border: "2px black solid"
      },
      "&.MuiButton-text": {
        color: "grey"
      },
      "&.MuiButton-contained": {
        color: "yellow"
      },
      "&.MuiButton-outlined": {
        color: "brown"
      }
    }
  };
});

//JSX
<Button className={classes.root} variant="text">
  Text
</Button>
<Button className={classes.root} variant="contained">
  Contained
</Button>
<Button className={classes.root} variant="outlined">
  Outlined
</Button>

All MUI Buttons have class .MuiButton-root, so if you have trouble overriding default MUI Button styling you can increase specificity by targeting that class. This is just one of several options for overcoming default styling. (The sx prop did not need this extra selector to style the border)

To target a particular variant, I dug into dev tools and looked at the classes applied to the DOM for that variant. Notice the classes with the word ‘contained’ in the DOM screenshot below.

MUI Button ‘Contained’ variant DOM

Override Button Color With Theme styleOverrides

The next two styling options I will discuss are more broad in their approach. They will style any Button that falls under the purview of a theme and ThemeProvider.

First, I styled Buttons with the new styleOverrides syntax. This accomplishes the same task as theme overrides in Material-UI v4, but the syntax is updated and allows for creating variants.

The pattern is: components -> primary class (MuiButton) -> styleOverrides -> CSS rule name (outlined).



//CustomTheme.tsx
import { createTheme } from "@mui/material/styles";

const customTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        outlined: {
          backgroundColor: "green"
        }
      }
    }
  }
});

export { customTheme };

//index.js render
<ThemeProvider theme={customTheme}>
  <ThemedButtons />
</ThemeProvider>

Then I wrapped a ThemeProvider with customTheme around the Component that contained the buttons I wanted to override. This automatically causes all child components to use the passed theme.

Now without any code, the buttons with variant ‘outlined’ inside of the ThemedButtons component will have background color ‘green’.

Here is the list of CSS rules that can be targeted.

For reference, here’s what the Material-UI v4 overrides syntax looked like for the above scenario:

overrides: {
  MuiButton: {
    outlined: {
      backgroundColor: "green"
    }
  }
}

Set Button Color With Theme Palette

Setting a custom theme palette is similar to creating styleOverrides. Both are done in a custom theme object and passed via ThemeProvider.

//CustomTheme.tsx
import { createTheme } from "@mui/material/styles";

const customTheme = createTheme({
  palette: {
    primary: {
      main: "#C0C0C0"
    }
  }
});

export { customTheme };

//index.js
<ThemeProvider theme={customTheme}>
  <ThemedButtons />
</ThemeProvider>


Button components are built internally to use theme.palette.primary.main. The contained variant uses primary.main for the background color. The outlined variant uses primary.main for the text color.

This means no additional code is required once the customTheme object is made available via ThemeProvider.

Resources

Code Sandbox Link

Another method of button styling is using Styled Components to create a new Button. It’s similar to styling by targeting CSS classes.

Here’s an MUI Button with a custom variant and every prop enabled.

Here’s how to align buttons inside a Box component. The new Stack component is also a good option for creating vertical and horizontal layouts.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.