Q:

antd custom primary color

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 ? 

A:

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

A:

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 

