How to customize mui button color in Next.js

In this tutorial, we are going to explain how to customize mui button color

This tutorial can be used in a React based app like Next.js

In short, to customize mui button color, you can either:

• Set propety style={{backgroundColor: "black"}} for mui Button component

the syntax is as follow

<Button  style={{backgroundColor: "black"}} />

Named colors are possible like: black,blue..., or hexa decimals for the color value.

Or

• Define classename to use multiple times using:

 <Box
    component="form"
    sx={{
    '& .brownbgbutton': { backgroundColor:"brown" },
           }}
    > </Box>

And then use it like this:

 <Button className="brownbgbutton">Submit</Button>
        

Material UI (MUI) customize button color sample

Now, let's see a sample in Next.js on how to customize mui button color

If you have not install mui yet or have trouble doing it, you can check quickly my article for mui package installation

Create pages/test.js and copy the following code

import { Button } from "@mui/material";

export default function Test() {
  return (
    <form className="p-2 flex flex-col w-1/3">
      <Button
        size="large"
        variant="contained"
        style={{ backgroundColor: "black" }}
      >
        Submit
      </Button>
    </form>
  );
}

}

The inline CSS used is tailwindcss, you can also use your own classes or use these classes after installing tailwindcss, this article will help you install it

Test validation

Now when you run localhost:3000/test you notice that the button is in black

You can try out other colors like: aliceblue, aqua , azure ...

Now try it out using css classnames like the following:

import { Box, Button } from "@mui/material";

export default function Test() {
  return (
    <Box
    component="form"
    sx={{
    '& .blackbgbutton': { backgroundColor:"brown" },
           }}
    >
      <Button
        size="large"
        variant="contained"
        className="blackbgbutton"
      >
        Submit
      </Button>
   </Box>
  );
}

Run it again, and you should be able to see the button in brown, this method works well when you have multiple buttons that you would like to customize their css in one shot

Conclusion

We have seen how to customize mui button color .

If you like to work with mui, check also this article which will help you better understand mui, with samples on how to use buttons, texfields and customize them.