BACKGROUND
In order to alter the theme of Ant Design, there are multiple target files that we have to change. The most important file will be the webpack config file, however, it is hard to access it directly.
The file is located inside the folder of node modules:
|
1 |
node_modules/react-scripts/config/webpack.config.js |
We can also make use of npm run eject directly to get the config file at our project root, however, it is also not effective to add small changes to such large file.
Therefore, we can use react-app-rewiredto define a small external config file and override the default theme file easily.
SOLUTION
STEP 1:
Install all the dependencies / tools needed
|
1 2 3 4 5 |
npm install react-app-rewired customize-cra babel-plugin-import less less-loader |
Explained:
react-app-rewired: main tools we need for overriding the default config file
customize-cra: dependencies for latest version of create-react-app and webpack4
babel-plugin-import: Used to import less file as styling
less: Default development language for styling in Ant Design
less-loader: Compiler for translating less into css
STEP 2:
Change the default npm scripts to react-app-rewired
Edit package.json under folder root, replace react-scriptsby react-app-rewired
|
1 2 3 4 5 6 |
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" }, |
STEP 3 (FINAL STEP):
Add the override config file(config-overrides.js) directly at the folder root (same directory as package.json)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const { override, fixBabelImports, addLessLoader } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ javascriptEnabled: true, modifyVars: { '@primary-color': '#1DA57A' }, }), ); |
CATCH-UP:
All the customized value should be placed inside modifyVars:{}
List of common theme variables used by Ant Design:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@primary-color: #1890ff; // primary color for all components @link-color: #1890ff; // link color @success-color: #52c41a; // success state color @warning-color: #faad14; // warning state color @error-color: #f5222d; // error state color @font-size-base: 14px; // major text font size @heading-color: rgba(0, 0, 0, .85); // heading text color @text-color: rgba(0, 0, 0, .65); // major text color @text-color-secondary : rgba(0, 0, 0, .45); // secondary text color @disabled-color : rgba(0, 0, 0, .25); // disable state color @border-radius-base: 4px; // major border radius @border-color-base: #d9d9d9; // major border color @box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15); // major shadow for layers |