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>
install antd using the command
npm install antd
install less globally using the command
npm install less -g
Step 2: Move into the dist directory of antd package in the node module
Step 3: In the dist directory create a file called my-theme.less or you could call it any name of your choice.
Step 4: Open the file <my-theme.less> in a code editor and type in the following code and save
@primary-color: #ff4acd ;
Replace the colors above with the color you want
Step 5: On this path /node_module/antd/dist run this command
lessc --js my-theme.less result.css
or compile it inside the project style folder by running this command
lessc --js my-theme.less ../../../src/style/custom-antd.css
Step 6: 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 override the antd theme