---
title: 使用独立开源组件
---

上一小节我们使用 Ant Design 组件库中的组件来实现列表。

这一小节我们用独立开源组件来实现联系人的操作按钮。

以按钮库 [Ladda](https://lab.hakim.se/ladda/) 的 [React 实现](https://www.npmjs.com/package/react-ladda) 为例，先添加依赖：

```bash
pnpm add react-ladda ladda
```

在 `src/App.tsx` 里导入组件，同时手动导入需要的 CSS：

```ts
import LaddaButton, { S, SLIDE_UP } from 'react-ladda';
import 'ladda/dist/ladda.min.css';
```

修改 `List.Item` 组件的调用代码，添加 actions：

```ts
<List.Item
  key={name}
  actions={[
    <LaddaButton
      key={email}
      loading={false}
      data-size={S}
      data-style={SLIDE_UP}
      data-spinner-size={20}
      data-spinner-color="#ddd"
      data-spinner-lines={8}>
      Call
    </LaddaButton>
  ]}>
  <List.Item.Meta
    avatar={<img alt="avatar" src={avatar} width={60} height={60} />}
    title={name}
    description={email}
  />
</List.Item>
```

`react-ladda` 组件库没有提供 types 文件，我们添加一个 `.d.ts` 文件：

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="macOS" label="macOS" default>

```bash
touch src/modern-app-env.d.ts
```

</TabItem>
<TabItem value="Windows" label="Windows">

```bash
ni src/modern-app-env.d.ts
```

</TabItem>
</Tabs>

在 `modern-app-env.d.ts` 中添加模块定义：

```ts
declare module 'react-ladda' {
  const LaddaButton: any;
  export default LaddaButton;
  export const S: any;
  export const SLIDE_UP: any;
}
```

执行 `pnpm run dev`，查看运行结果：

![result1](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/05/result1.png)

:::info 注
CSS 文件会自动经过 [postcss-preset-env](https://preset-env.cssdb.org/features)、[autoprefixer](https://github.com/postcss/autoprefixer) 等主流 PostCSS 项目的处理，不用担心平台兼容性问题（如果有特殊兼容需求可以调整 [browserslist](/docs/guides/tutorials/c04-es6-plus-and-ts/4.3-compatibility) 配置）

也支持导入 SCSS、Less 文件。有的组件使用 CSS in JS，不需要额外导入样式文件，下一节会有相关介绍。
:::

---

> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c05/hello-modern-2)。