How to customize an Ant Design Theme in react-scripts easily, and without ejecting? The Ant Design documentation talks about customization here, and the suggested options are:

1. Replace react-scripts with craco
2. Eject

I dislike both options, and I found a third one that is simple and reliable. The idea is to make a custom Less theme file and compile it to static CSS by running the Less compiler separately, instead of using less-loader as in the first two approaches.

In this article I demonstrate the approach using a sample application. With the default theme, it looks like this:

The code is available here on GitHub.

Set Up a Custom Theme File

To change the look of this application, I set up a custom theme file at src/antd-theme/my-antd-theme.less:

@primary-color: purple; // primary color for all components
@border-radius-base: 5px; // major border radius

The theme is changes the primary color and the border radius. Of course there many more Ant Less variables for theme customization. After this setup, you will be able to use all of them.

To make this work, I also need another Less file src/antd-theme/antd-customized.less that will import the original Ant Design styles and combine them with my theme:

@import "antd/lib/style/themes/default.less";
@import "antd/dist/antd.less"; // Import Ant Design styles
@import "./my-antd-theme.less"; // Your theme

This Less file will compile to our new Ant Design CSS.

Setup the Less Compiler

The next step is to setup the Less compiler. I add it to my project via npm:

npm i less --save-dev

Then I add a new script to the scripts section in package.json:

  "less": "lessc --js src/antd-theme/antd-customized.less src/antd-theme/antd-customized.css",

Now I can run the less compiler with this command:

yarn less

It will generate a CSS file src/antd-theme/antd-customized.css with all Ant Design styles, customized based on my theme.

Update the App

The last step is to update my App.js to use the new Ant Design CSS, instead of the original. Update your CSS import in App.js to

import "./antd-theme/antd-customized.css";

After running the app, it will look like this:

My recommendation is that you check these new files into version control, including the generated CSS file. It will keep working with the custom theme straight forward for your colleagues.

One of my customers is using the described customization approach successfully. I hope you find it useful too.