antd custom primary color

Question

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 ?

Answer 1

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