Используйте Create-React-App с antd

Question

Я пытался использовать antd с создать приложение реакции .

Я установил antd в проекте с помощью

yarn add antd

Добавил кнопку, используяКомпонент кнопки 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;

Тем не менее, кнопка не отображалась правильно.При проверке элемента я обнаружил, что применяются классы antd.Просто CSS не загружен.

Answer 1

Хотя проверенный ответ работает, вы можете минимизировать размер пакета CSS в сборке , импортируя только необходимый CSS следующим образом.

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

Обновление

Недавно заметил, что даже при импорте компонентов antd в соответствии с вышеупомянутым способом (зачеркивание текста) он все еще добавляет ненужный JS в сборку,

Я даже пытался отреагировать на реакцию в приложении в ant design docs проблема все та же (все еще добавляет ненужный JS в сборку).Итак, я открыл проблему в репозитории antd: https://github.com/ant-design/ant-design/issues/13274

Обновление 2:

Пожалуйста, посмотрите: https://github.com/ant-design/ant-design/issues/12011

Answer 2

Мне пришлось добавить antd / dist / antd.css вверху src / App.css.

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

.App {
  text-align: center;
}

Я понял это из официальных документов antd для использования с Create React App

Итак, все необходимые шаги: установить antd

yarn add antd

Использовать компонент из 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;

И импортировать antdcss в основной файл css (src/App.css)