1.创建react app

npx create-react-app  myapp

2. 安装antd

npm install --save antd

3.在app.js 里面修改代码为

import logo from './logo.svg';
import './App.css';
import {Button} from 'antd';
function App() {
  return (
    <div className="App">
      <Button/>
    </div>
  );
}

export default App;

启动，现在button是灰色

4. 按需引入

  npm install babel-plugin-import
  npm install --save-dev react-app-rewired customize-cra  //该包是对react-scripts进行了扩展
  npm install --save-dev less less-loader@5.0.0(高版本可能会报错 找不到.getOptions方法)

如果没有安装babel的话
npm install --save-dev babel-core babel-loader@8.1.0 babel-preset-es2015 babel-preset-react
将package.js 这段代码修改为

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

5在根目录下创建 config-overrides.js文件

粘贴一下内容；

const { useBabelRc,override, addLessLoader } = require( 'customize-cra');
module.exports = override( 
    addLessLoader({        
        javascriptEnabled: true,        
        modifyVars: { 
            '@primary-color': '#50b7c1' //antd主题颜色
        }    
    }),
    useBabelRc()
)

6.根目录下创建.babelrc文件或者package.json

中写入以下配置；

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true   //“css”默认会引入css样式  true默认引入less 这里用true主题色才起作用
        }
      ]
    ]
  },

npm start重启项目 会看到有样式了