Solution

To change color of ant design checkbox in react js, Use this css code .ant-checkbox-checked .ant-checkbox-inner in background-color: #f093d4 !important; border-color: #f093d4 !important; then it will change color of ant design checkbox.

Snippet

In this snippet, see small example for using Checkbox component of Ant design library, with use of css code .ant-checkbox-checked .ant-checkbox-inner change color of ant design checkbox.

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: #f093d4  !important;         
  border-color: #f093d4 !important;
}

Example

In this example, we will import the Checkbox component from the ant library. use Checkbox component of ant design library, Use this css code .ant-checkbox-checked .ant-checkbox-inner in background-color: #f093d4 !important; border-color: #f093d4 !important; then it will change color of ant design checkbox.

Let’s start coding…

App.js

import { Checkbox } from 'antd';
import "./App.css";

export default function App() {
  return (
    <Checkbox >My Checkbox</Checkbox>
  );
}

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: #f093d4  !important;         
  border-color: #f093d4 !important;
  }

Output

Ant-design, button

Here, we are provided code sandbox links for the above program to change color of ant design checkbox. 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.