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

Answer 2

~~尽管已验证的答案有效，但您可以通过仅按以下方式导入所需的CSS来最小化构建中CSS捆绑包的大小。~~

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

更新

最近注意到，即使按照上述方式（通过文本删除）导入antd组件，它仍会在构建中添加不必要的JS

我什至尝试在ant design docs问题中进行react-app-rewired仍然相同（仍在构建中添加不必要的JS）。因此，我在antd仓库上开了一个问题：https://github.com/ant-design/ant-design/issues/13274

希望在找到解决方案时更新答案。

Answer 3

在您的项目中安装 antd 后，您可以将按钮导入为

从'antd'导入{Button};

使用带有antd

3 个答案: