Umi项目，如何引入antd 的Button呢？

Question

Umi项目，如何引入antd 的Button呢？

我用umijs搭建了一个测试项目，

但是在使用的时候不能引入Button：
使用以下方式都不能引入：

我看依赖是安装了的：

看到.umirc.ts已经开启了antd插件：

---

更新1：
1.虽然红线报错，但是实际上是可以使用Button的。
2.在.umirc.ts中配置了extraBabelPlugins之后，还是有红色下换线：

Answer 1

1. 配置 babel

在 .umirc.js 或者 config/config.js 中配置 babel：

{
  "extraBabelPlugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
}

这会让 babel 帮助我们自动加载 antd 的组件。

2. 引入 Button

在需要使用 Button 的组件中，可以这样引入：

import { Button } from 'antd';

然后就可以在组件中使用 Button 了。

例如：

import React from 'react';
import { Button } from 'antd';

const MyButton = () => {
  return <Button type="primary">Click me</Button>;
}

export default MyButton;

Answer 2

这个应该属于VS Code 没有及时更新导致的，一般重启项目，或者重启电脑应该就会消除这个下划线。