DEV Community

Andre Pautin
Andre Pautin

Posted on

Add background color to Material UI Button components

One thing you may notice when using the Material UI library for styled React components is that they're easily customizable. After smoothly implementing designs into a project that I'm working on, I came across something that I thought would be an easy fix - changing the background color of an MUI button.

In CSS, you'd probably do something like:

.button {
  background-color: 'green'
}
Enter fullscreen mode Exit fullscreen mode

I thought it'd be similar using MUI's styling prop, something like:

<Button variant='contained' sx={{bgColor: 'green'}}>Button</Button>
Enter fullscreen mode Exit fullscreen mode

I saw no changes in this case. One solution that I came across for inline styling for the button's background color was accessing the MuiButton-root class on the component:

<Button
    variant="contained"
    sx={{
      "&.MuiButtonBase-root": {
         bgcolor: "green",
       },
      "&.MuiButtonBase-root:hover": {
         bgcolor: "#0C6D9E",
       },
      }}
>
Enter fullscreen mode Exit fullscreen mode

Hope this helps you out!

Top comments (0)