3

I am using antd and create-react-app to create my application.

I following this examplle:https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme

Here they have given example using webconfig. When i tried to replacete the same i m unable to change the primary color. Can anybody tell how to do the same in create-react-app ?

DadyByte
  • 894
  • 6
  • 18
  • 30

2 Answers2

5

If you don't want to use react-scripts eject you can simply create a less file (let's say main.less ) , import antd.less and replace the default variables of ant design in this main.less file.

compile this less file using lessc (npm i -g less).

lessc "main.less antd.css" --js --js is for inline javascript in less Now simply include these complied css in your app.

check out https://medium.com/@aksteps/782c53cbc03b for complete walkthrough

Aakash Yadav
  • 585
  • 5
  • 8
  • Perfect solution! Will add there a comment from article that helped me to implement this. If less won't compile your file, just remove the quotes : lessc ./src/styles/main.less ./src/styles/css/antd.css --js – MadaShindeInai May 10 '22 at 11:33
3

UPDATE: People, please read the date of the answer. It's from 2018, It was the accepted answer at that time. Now probably it's outdated, please refer to the newest official documentation or answers.

1st way Manually ejecting create-react-app

You need to eject with npm run eject to have control the webpack.config.js

then you can use LESS's modifyvars to change the primary color

just as the guide explains

here is an english version:

https://ant.design/docs/react/customize-theme

https://github.com/webpack-contrib/less-loader#less-options

2nd. use react-app-rewire-less

Import it and modify config-overrides.js like below.

$ yarn add react-app-rewire-less --dev
  const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');

  module.exports = function override(config, env) {
-   config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
+   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);  // change importing css to less
+   config = rewireLess.withLoaderOptions({
+     modifyVars: { "@primary-color": "#1DA57A" },
+   })(config, env);
    return config;
  };

Check more information here: https://ant.design/docs/react/use-with-create-react-app

Yichz
  • 9,250
  • 10
  • 54
  • 92
  • Thanks @Kossel, it's very useful, currently I am very busy with other work and will try to run this at weekend – DadyByte Feb 22 '18 at 06:41
  • It's weird approach. Ant have embedded ways to customize colors without ejecting – Igor Popov Jan 11 '23 at 14:01
  • @IgorPopov did you realized the question was answered in 2018? Many things have changed and that was the way to do it. – Yichz Jan 11 '23 at 22:17
  • @Yichz yes. And implementation this without ejecting was in that year. And this answer google still give you in list of answer. Ejecting - not an answer ever. – Igor Popov Jan 16 '23 at 13:25