The Simple Way to Customize Ant Design in React-Scripts
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:
- Replace react-scripts with craco
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
@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
"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:
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
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.