How to change mui button background color in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To change mui button background color, set in style attribute backgroundColor: "#21b6ae",. It will change mui button background color.

Today, I am going to show you, how to change mui button background color in react js.

Installation

Install the following packages to use mui button background color in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

First method: Inline css

MUI material button change mui button background color example.

The below code is an example of changing mui button background color using mui button.

App.js

import * as React from 'react';
import Button from '@mui/material/Button';

export default function BasicButtons() {
  return (
    <Button
    style={{
        borderRadius: 35,
        backgroundColor: "#21b6ae",
        padding: "18px 36px",
        fontSize: "18px"
    }}
    variant="contained"
    >
    Submit
</Button>
  );
}

In the above code example, I have used the @mui/material button component and changed mui button background color of MUI button.

Check the output of the above code example.

Second method: External CSS

MUI material button change mui button background color example.

The below code is an example of changing mui button background color using mui button.

App.js

import * as React from 'react';
import Button from '@mui/material/Button';
import "./App.css"

export default function BasicButtons() {
  return (
    <Button variant="contained" size="medium">
    Medium
  </Button>
  );
}

App.css

.MuiButton-root {
  background-color: aqua !important;
}

In the above code example, I have used the @mui/material button component and changed mui button background color of MUI button.

Check the output of the above code example.

All the best 👍