将 Create-React-App 与 antd 一起使用

Question

我尝试将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;

尽管如此，按钮仍无法正确呈现。在检查元素时，我发现正在应用 antd 类。只是css没有加载。

Answer 1

我必须在 src/App.css 的顶部添加 antd/dist/antd.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;

并在主 css 文件（src/App.css）中导入 antdcss