Customizing Ant Design Theme — A short and simple guide

Ant design is a very comprehensive React UI library that I use in almost every project. It provide beautiful components and very handy layout system to build your application very quickly.

This a guide for me to may be useful for those who reading now, to do it easily in upcoming projects. It’s more likely a self guild that I will not forget this in the future.

Step 0

npx create-react-app custom-theme

Step 1

install required packages:

yarn add antd react-app-rewired babel-plugin-import customize-cra less less-loader

Step 2

modify your package.json file in the project root

“scripts”: {
    “start”: “react-app-rewired start”,
    “build”: “react-app-rewired build”,
    “test”: “react-app-rewired test”,
    “eject”: “react-app-rewired eject”
}

Step 3

Create following files in the project root

config-overrides.js : overriding the web-pack configurations
custom-theme.less: overriding less variables

/* filename : config-overrides.js*/
/* path: {project-root}*/
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
lessOptions:{
   javascriptEnabled: true,
   modifyVars: {hack: `true; @import "./custom-theme.less";`}
}
,
}),
);
/* filename : custom-theme.less*/
/* path: {project-root}*/
@primary-color : red;

Note : you can override the whatever the variables you want in this files. List of variables

Hope this would help full if you need to achieve the same.