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

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

最佳答案

我必须在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