# @dagster-io/ui-components 中文文档

规范地址：https://npmcn.com/package/%40dagster-io/ui-components/

版本：1\.4\.1
npm 元数据更新时间：2026-02-18T17:45:25.404Z
中文译文更新时间：2026-11-14T07:58:56.066Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40dagster-io/ui-components
原文对照：https://npmcn.com/package/%40dagster-io/ui-components/?lang=original

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

- 包体积（解压后）：9.2 MB，129 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：@blueprintjs/core ^5，@blueprintjs/popover2 ^2，@blueprintjs/select ^5，@tanstack/react-virtual ^3\.0\.1，react ^18\.3\.1，react-dom ^18\.3\.1，react-is ^18\.3\.1，styled-components ^5\.3\.3
- 首次发布：2023-08-02T21:43:39.607Z
- 最新版本发布：2026-02-18T17:45:24.621Z
- 近 30 天下载量：2114（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 2 个）

## 中文简介

Dagster UI 组件库

## 安装

```sh
npm install @dagster-io/ui-components
```

也可以使用：`pnpm add @dagster-io/ui-components`、`yarn add @dagster-io/ui-components`、`bun add @dagster-io/ui-components`

## README

## Dagster UI 组件库

该项目包含Dagster产品使用的核心React UI组件库.

虽然作为公用套件发布,但并不打算在Dagster代码之外使用,目前不支持公众消费.

塞姆弗用法可能不一致,新版本可能会被发布,在不发出警告的情况下突破更改.

## 使用量

### 1\. 安装软件包.

```bash
yarn add @dagster-io/ui-components
```

请注意,库目前包含许多对等依赖. 一定要安装这些.

### 2\. 添加字体样式

必要时,在应用程序根中添加字体样式,并在全局样式中使用.

如果您正在通过其他一些方式(例如Google Fonts API)导入字体, 您可能不需要这样做 .

```jsx
import {FontFamily, GlobalInter} from '@dagster-io/ui-components`;
import {createGlobalStyle} from 'styled-components';

const GlobalStyle = createGlobalStyle`
  * {
    font-family: ${FontFamily.default}; /* Default font is Inter */
  }
`;

const MyAppRoot = () => (
  <>
    <GlobalInter />
    <GlobalStyle />
    <div>
      /* Your app */
    </div>
  </>
);
```

### 3\. 进口部件

```jsx
import {Box, Button, Color, Icon} from '@dagster-io/ui-components';
```

卷起积分指定了某些共同的组件被拆分成自己的捆绑,使消费者能将捆绑大小最小化并避免将整个库导入,因为其目前含有很多你可能不需要的复杂而沉重的组件.

如果您发现您输入的某个特定组件炸飞了您的建筑大小, 我们可以把它添加到 `input` 列表中 `rollup.config.js` 将它分成自己的捆绑.

### 4\. 增加 " 蓝图 " CSS.

必要时,加入"蓝图CSS". 一些组件需要基本的"蓝图"风格. 许多人没有.

_我怎么知道我是否需要蓝图?_

-   检查您正在使用的组件是否生成了蓝图组件 。 如果是,则包括蓝图CSS.
-   如果您不确定, 请尝试渲染组件, 看看它的样式看起来是否破损 。 如果是这样,样式涉及 `bp3` CSS课,你需要蓝图CSS.

```css
/* blueprint.css */

@import '@blueprintjs/core/lib/css/blueprint.css';
@import '@blueprintjs/icons/lib/css/blueprint-icons.css';
@import '@blueprintjs/select/lib/css/blueprint-select.css';
@import '@blueprintjs/table/lib/css/table.css';
@import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';
```

```jsx
import './blueprint.css';

export const MyAppRoot = () => ...;
```

## 常见问题

### @dagster-io/ui-components 是什么？

Dagster UI 组件库

### 如何安装 @dagster-io/ui-components？

在项目目录运行 npm install @dagster-io/ui-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@blueprintjs/core（^5）、@blueprintjs/popover2（^2）、@blueprintjs/select（^5）、@tanstack/react-virtual（^3\.0\.1）、react（^18\.3\.1）、react-dom（^18\.3\.1）、react-is（^18\.3\.1）、styled-components（^5\.3\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dagster-io/ui-components 支持 TypeScript 吗？

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

### @dagster-io/ui-components 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dagster-io/ui-components 可以商用吗？

@dagster-io/ui-components 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @dagster-io/ui-components 的下载量有多少？

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

### @dagster-io/ui-components 还在维护吗？

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