How to change mui button color in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To change mui button color, set sx={{ color: 'blue' }}. It will change mui button color.

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

Installation

Install the following packages to use mui textfield 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 change mui button color example.

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

App.js

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

export default function ColorButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button
  variant='outlined'
  sx={{ color: 'blue' }}
>
 Button
</Button>
    </Stack>
  );
}

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

Check the output of the above code example.

Second method: External CSS

MUI material change mui button color example.

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

App.js

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

export default function ColorButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button
  variant='outlined'
  sx={{ color: 'blue' }}
>
 Button
</Button>
    </Stack>
  );
}

App.css

.MuiButton-outlinedPrimary{
  color: rgb(238, 43, 43) !important;
}

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

Check the output of the above code example.

All the best 👍