react项目引入antd框架方式以及遇到的一些坑

下面是react项目引入antd框架的攻略，包括以下内容：

1. 安装antd
2. 引入antd样式
3. 引入antd组件
4. 遇到的常见问题及解决方案

1. 安装antd

在安装antd之前，需要确保已经安装了react和react-dom，可以使用以下命令安装：

npm install react react-dom

接着，使用以下命令安装antd：

npm install antd

2. 引入antd样式

为了让antd组件能够正常显示样式，需要引入antd的样式文件。可以通过以下两种方式引入：

2.1. 引入CSS文件

在React应用中，我们可以直接在index.js文件中引入antd的样式，例如：

import 'antd/dist/antd.css';

2.2. 引入Less变量

通过引入Less变量，我们可以对antd的样式进行定制，先通过npm run eject将Webpack配置文件暴露出来，然后在src目录下创建一个theme.less文件，例如：

@import "~antd/lib/style/themes/default.less"; // 引入antd默认主题变量

// 修改主色
@primary-color: #1890FF;

// 引入antd样式
@import '~antd/dist/antd.less';

最后，在src/index.js文件中引入theme.less文件，例如：

import './theme.less';

3. 引入antd组件

在React应用中，可以通过import语句引入antd组件，例如：

import { Button } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary">Hello Antd</Button>
    </div>
  );
}

4. 遇到的常见问题及解决方案

4.1. 引入antd样式失效

如果在引入antd的过程中发现样式没有生效，可以尝试以下几种解决方案：

• 确认antd的样式文件路径是否正确
• 确认antd的样式是否被其他样式覆盖
• 清空浏览器缓存

4.2. 在IE浏览器中出现样式问题

由于IE浏览器对CSS的支持不完全，部分antd组件在IE浏览器中可能出现样式问题。可以使用polyfill来解决此问题，具体可以参考官方文档。