How to change ant design button color in react js?

Solution

To change ant design button color in react js, first, install ant design library using npm install antd command, and use inline css style={{backgroundColor: "red"}} to change the color of the button.

Snippet

In this snippet, we will use inline css style={{backgroundColor: "red"}} to change the color of the button.

<div>
  <Button type="primary" style={{
    backgroundColor: "red"
  }}>Primary</Button>
</div>

Example

In this example, we will improt the button component from the ant library, and the use of div element and button component use is simple text and type="primary"is a ant design and use inline css style={{backgroundColor: "red"}} to change the color of the button.

Let’s start coding…

App.js

import { Button } from 'antd';
const App = () => (
  <>
  <div>
    <Button type="primary" style={{
          backgroundColor: "red"
        }}>Primary</Button>
  </div>,
  </>
);
export default App;

Output

Links

Here, we are provided code sandbox links for the above program change ant design button color. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.