Ant design is one of the most popular UI library, mostly used with ReactJs. It has awesome components but beginners find it very difficult to override their default color hence, this post.

Step 1: Set up your app using the command

npx create-react-app <app-name>

Step 2: Install antd using the command

npm install antd

Step 3: Install less globally using the command

npm install less -g

Step 4: Move into the dist directory of antd package in the node module.

/node_module/antd/dist

Step 5: In the dist directory create a file called my-theme.less or you could call it any name of your choice.

Step 6: Open the file in a code editor and type in the following code below and save.

@import "./antd.less";
@primary-color: #ff4acd ;
@link-color: #ff4acd;

Note, replace the colors above with the color you want

Step 7: On this path /node_module/antd/dist run the command below

lessc --js my-theme.less result.css

or compile it inside the project style folder by running the command below

lessc --js my-theme.less ../../../src/style/custom-antd.css

Step 7: Open the style folder created in the src directory copy the custom-antd.css , goto index.js replace

import "antd/dist/antd.css"

with

import "../src/style/custom-antd.css"

You have finally overridden the antd theme and default color