Customising Ant Design (antd) theme without using react eject or any unreliable packages

Ant Design offers very carefully designed and developed components and has great customisability. But anyone who have used antd must have faced the challenge to customise the theme like colours, universal styles like border radius, and many other default variable.

Though Ant Design offers you to customise all these (See https://ant.design/docs/react/customize-theme) but is only available with less and there is not out of box support for less like scss , which works simply on installing package node-sass .

To make less work with your project you need to make changes in webpack config, which can only be done by using react-scripts eject . Ejecting of course have downside that’s why it will give you warning :

Note: this is a one-way operation. Once you eject, you can’t go back!

So what you do ?

To find a solution we need to understand the requirement better.

We need antd css which is compiled with our customisations (i.e. we want to replace some variables in less and then get css with new variables)

Since the styling defaults like primary colour, default border radius won’t be changed once fixed (or will be changed very frequently) we might need…