将 Create-React-App 与 antd 结合使用

Question

I tried to use antd with create react app .

I installed antd in project using

yarn add antd

Added a button using antd's button component

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

Still, button did not rendering correctly. When inspecting the element, I find that antd classes are being applied. It's just that css is not loaded.

Answer 1

I had to add antd/dist/antd.css at the top of src/App.css.

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

I figured out this from antd's official docs for using with Create React App

So all the steps required are to install antd

yarn add antd

Use a component from antd

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

And import antdcss in main css file (src/App.css)

Answer 2

Although verified answer works, you could minimize the size of the CSS bundle in the build by only importing required CSS as follows.

 import Button from 'antd/lib/button'; import 'antd/lib/button/style/css'; // importing only the required CSS

Update

Recently noticed even importing antd components according to above mentioned way(strike through text) it still adds unnecessary JS in to the build,

I even tried react-app-rewired in ant design docs issue still the same ( still adds unnecessary JS in to the build ). So I opened an issue on the antd repo : https://github.com/ant-design/ant-design/issues/13274

Update 2:

Please take a look at : https://github.com/ant-design/ant-design/issues/12011

Answer 3

After installing antd in your project you can import button as

import {Button} from 'antd';

Answer 4

First install less-loader on npm via npm i less-loader , then create a index.less folder on the index.js directory. paste this on index.less -> @import "~antd/dist/antd.dark.less"; After that import this .less file to your index.js and have fun :) You can find some other methods here

You can also use craco(create react app config override) but its more complicated.