# @digital-ai/dot-components 中文文档

规范地址：https://npmcn.com/package/%40digital-ai/dot-components/

版本：8\.3\.0
npm 元数据更新时间：2026-11-03T14:17:14.472Z
中文译文更新时间：2026-11-12T08:26:37.998Z
软件包许可：SEE LICENSE IN \<LICENSE\.md\>

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40digital-ai/dot-components
原文对照：https://npmcn.com/package/%40digital-ai/dot-components/?lang=original
项目主页：https://github.com/digital-ai/dot-components#readme
源码仓库：https://github.com/digital-ai/dot-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.2 MB，420 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：14 个
- peer 依赖：react ^17\.0\.2 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2021-01-11T11:58:12.614Z
- 最新版本发布：2026-11-03T14:17:14.162Z
- 近 30 天下载量：5078（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：329（近 12 个月 30 个）

## 中文简介

以下的 Dot 设计系统组件库

## 安装

```sh
npm install @digital-ai/dot-components
```

也可以使用：`pnpm add @digital-ai/dot-components`、`yarn add @digital-ai/dot-components`、`bun add @digital-ai/dot-components`

## README

# @ digital-ai/ dot- 组件

![npm version](https://badge.fury.io/js/%40digital-ai%2Fdot-components.svg) ![npm (prod) dependency version](https://img.shields.io/npm/dependency-version/@digital-ai/dot-components/@mui/material?label=%40material-ui)

## 欢迎

所以你决定用 `dot-components` 在你的应用中,这是惊人的。 一定要来 说"你好" [#点- 组件](https://app.slack.com/client/T02GN6UQX/C01GVS9T7GV) 在Slack的频道 告诉我们你是如何使用我们的图书馆.

## 安装

```sh
# with npm
npm install @digital-ai/dot-components

# with yarn
yarn add @digital-ai/dot-components
```

### 主题提供者

这个 `DotThemeProvider` 为此库中的组件提供主题。 当您使用此库时, 您需要将您的应用程序包成这样 :

```jsx
<DotThemeProvider>
  <App />
</DotThemeProvider>
```

一旦您的申请被包裹 `DotThemeProvider`,您的样式组件可以使用主题的颜色和间隔 :

```jsx
import styled, { css } from 'styled-components';

const StyledWidget = styled.div`
  ${({ theme }) => css`
    background-color: ${theme.palette.secondary[300]};
    border: 1px solid ${theme.palette.primary.main};
    .my-widget-text {
      margin-left: ${theme.spacing(2)};
    }
  `}
`;

export interface MyWidgetProps {
  text: string;
}

export const MyWidget = ({ text }: MyWidgetProps) => {
  return (
    <StyledWidget>
      <div className="my-widget-text">{text}</div>
    </StyledWidget>
  );
};
```

**说明:** 如果您想要创建自定义主题, 您可以遵循 [这些方向](https://github.com/digital-ai/dot-components/wiki/Product-Specific-Component-&-ThemeProvider)。 。 。 .

### 配置游戏

我们正在利用 `@digital-ai/dot-icons` 用于 `@font-face`。如果您正在使用 Jest,那么您需要更新以下文件 。 文件的位置可能因应用程序的结构而异

#### `jest.config.js`

```js
moduleNameMapper: {
  '@digital-ai/dot-icons': '<rootDir>/testing-utils/style-mock.ts',
  '@digital-ai/dot-illustrations': '<rootDir>/testing-utils/style-mock.ts',
}
```

#### `style-mock.ts`

```js
module.exports = {};
```

### 锁定 CSS 类名称

CSS类名称有三种不同的类型被使用: `dot-` 课, `Mui` 课程,以及 `styled-components` 课程。 鼓励您使用 `dot-` 应用样式中的类,但也可以使用 `Mui` 上课,如果你喜欢。 必须指出 `Mui` 类别会发生变化,而且不能保证在各种释放中保持稳定.

**说明:** 这个 `styled-components` 类由库生成,不应被使用,它们看起来像是随机字母,例如: `kMprfx`

### 解决样式冲突

现有的应用程序样式可能以与来自 `dot-components`。 。 。 .

因为 `dot-` 类适用于属于下列组成部分的本地要素: `dot-components`,这些冲突可以通过对应用程序样式作小的修改来解决.

例如,假设应用程序包括这样的全球样式:

```css
input {
  background-color: red;
}
```

要覆盖此样式 `dot-components`,可改为:

```css
input:not(.dot-input) {
  background-color: red;
}
```

### 更新

当你准备好拉 在最新版本的 `dot-components` 软件包运行以下命令.

```sh
# with npm
npm update @digital-ai/dot-components@latest

# with yarn
yarn upgrade @digital-ai/dot-components@latest
```

## 字体图标

查找您想要使用的图标 [.点设计系统](https://zeroheight.com/4a9ac476a/p/13a447-icons/b/43c8ca)

遵循代码示例 [在此显示](https://digital-ai.github.io/dot-components/?path=/docs/components-icon--default)

注:如果知道图标的名称,可以使用右上角的搜索来搜索.

如果你正在使用这个 `DotIcon` 组件,则不需要在 `icon-` 图标名称的前缀.

## 捐款

[学习如何贡献](https://zeroheight.com/4a9ac476a/p/50279a-developers/b/631dc3)

## 代码样式指南

[学习我们的代码样式指南](https://zeroheight.com/4a9ac476a/p/50279a-developers/b/75551c)

## 更改日志

[了解最新的改进](https://zeroheight.com/4a9ac476a/p/50279a-developers/b/95a7cc)。 。 。 .

## 安全政策

[了解我们的安全政策](https://zeroheight.com/4a9ac476a/p/50279a-developers/b/098239)

## 常见问题

### @digital-ai/dot-components 是什么？

以下的 Dot 设计系统组件库

### 如何安装 @digital-ai/dot-components？

在项目目录运行 npm install @digital-ai/dot-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.2 \|\| ^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @digital-ai/dot-components 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @digital-ai/dot-components 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @digital-ai/dot-components 可以商用吗？

@digital-ai/dot-components 使用 SEE LICENSE IN \<LICENSE\.md\> 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @digital-ai/dot-components 的下载量有多少？

根据 npm 官方下载统计，@digital-ai/dot-components 在 2026/10/12 – 2026/11/10 这 30 天内被下载 5,078 次，日均约 169 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @digital-ai/dot-components 还在维护吗？

最新版本 8\.3\.0 发布于 2026/11/03（8 天前）；至今共发布 329 个版本，其中过去 12 个月发布了 30 个；首次发布于 2021/01/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。