CODEWITHSUNDEEP
javascriptcssreactjscreate-react-app
sudo bangbang
sudo bangbang

Reputation: 28169

Use Create-React-App with antd

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.

Upvotes: 5

Views: 2252

Answers (4)

Furkan G&#246;kmen
Furkan G&#246;kmen

Reputation: 81

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.

Upvotes: 0

Force Bolt
Force Bolt

Reputation: 1221

After installing antd in your project you can import button as

import {Button} from 'antd';

Upvotes: 0

kaushalyap
kaushalyap

Reputation: 13597

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

Upvotes: 1

sudo bangbang
sudo bangbang

Reputation: 28169

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)

Upvotes: 4

Related Questions