The Complete Guide to MUI Button Color (v5 and v4)

MUI Button color is a core aspect of proper theming. Fortunately MUI 5 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.

First I will show the quickest way to change Button color for the following (using the sx prop):

• Text color
• Background color
• Outline/border color

Next, I will show additional ways to apply the color you need for your MUI Button. Which one you should use depends on situation and preference. A best use case is described in each section.

• Style by Button variant
• Style with theme overrides
• Style with theme Palette

Last, I will show how to toggle the Button color on click.

A Code Sandbox link is in the Resources section.

See a video version of this post on YouTube or watch below:

How to Change MUI Button Color With One Line of Code

The quickest way to change MUI Button text, background, and border color is with the sx prop. Here’s a simple code example:

<Button
  variant='outlined'
  sx={{ color: 'yellow', backgroundColor: 'orange', borderColor: 'green' }}
>
  SX Button
</Button>

It’s important to notice that the variant matters. If you do not use outlined variant, the Button will not have a border. In that case, use border: '1px solid green' to add an outline.

The Button component also has a color prop. I usually don’t use this prop because it only changes background color, and it only accepts string values of ‘primary’, ‘secondary’, and other theme palette field names.

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. I used it in the previous section because it is the fastest way to style the Button.

The sx prop 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. Contained is the only variant with shadow. 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.

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. This should be used only if you are using v4, but there is still support in v5 (the import has changed).

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.

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.

I suggest using styleOverrides if you want multiple Buttons to have the same styling, and if there are lots of style changes to the Button.

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

I suggest using the theme palette if you want a new color in the theme, or if you want to change a default color.

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.

Toggle MUI Button Color On Click

We can use the first example in this post to create a button with toggled color. All we need to add is an onClick handler and a state value.

const [clicked, setClicked] = useState(true);

//JSX
<Button
  sx={{ 
    color: clicked ? 'yellow' : 'red', 
    backgroundColor: 'orange', 
    border: '1px solid green' }}
  onClick={ () => setClicked(!clicked) }
>
  SX Button
</Button>

In this simple example I toggle the state value, which then toggles the Button color directly in the sx prop with a conditional value.

Change MUI Button Active Color

The active state is applied only while a mouse click is still occurring. As soon as the click is let up, the active state is no longer applied.

Here’s the nested selector that will style the Button during active state:

"&:active": {
  backgroundColor: 'purple'
}

FAQs

Resources

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 set Button width and height.

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.

Here’s how add background color and other styling to the MUI Badge.

Code Sandbox Link