Use Create-React-App with 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)