How to override Ant design default color

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

/node_module/antd/dist

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

@import "./antd.less";

@primary-color: #ff4acd ;

@link-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

COMMENTS

front dsek
fantastic
Okorie chinedu sunday
cool stuff
chinedu
Thanks for this article it was helpful

Leave a comment