javascript - 将 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's official docs for using with 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