# @amsterdam/design-system-css 中文文档

规范地址：https://npmcn.com/package/%40amsterdam/design-system-css/

版本：4\.5\.0
npm 元数据更新时间：2026-10-22T13:58:52.212Z
中文译文更新时间：2026-11-06T01:38:09.449Z
软件包许可：EUPL-1\.2

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

原始 npm 页面：https://www.npmjs.com/package/%40amsterdam/design-system-css
原文对照：https://npmcn.com/package/%40amsterdam/design-system-css/?lang=original
项目主页：https://designsystem.amsterdam/
源码仓库：https://github.com/Amsterdam/design-system

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

- 包体积（解压后）：650 kB，257 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：@amsterdam/design-system-assets 2\.7\.0，@amsterdam/design-system-tokens 4\.4\.0
- 首次发布：2023-02-10T13:28:06.137Z
- 最新版本发布：2026-10-22T13:58:51.842Z
- 近 30 天下载量：15150（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：47（近 12 个月 12 个）

## 中文简介

阿姆斯特丹设计系统和一些一般公用事业的所有组件的样式表。 用它来应用阿姆斯特丹城的外观设计来应用到你的HTML元素或非反应组件.

## 安装

```sh
npm install @amsterdam/design-system-css
```

也可以使用：`pnpm add @amsterdam/design-system-css`、`yarn add @amsterdam/design-system-css`、`bun add @amsterdam/design-system-css`

## README

# 阿姆斯特丹设计系统:CSS组件

此软件包为 : [阿姆斯特丹设计系统](https://designsystem.amsterdam/) 和一些一般的公用事业. 用它来应用阿姆斯特丹城的外观设计来应用到你的HTML元素或非反应组件.

## 导言

我们用一个单独的软件包来出版我们的组件样式表,以帮助复制到其他库、平台或SaaS应用程序中. 这些类别是构成部分的定义与其执行之间的合同,有助于不断升级.

我们 [反应组件](https://www.npmjs.com/package/@amsterdam/design-system-react) 使用它们渲染的 HTML 中的这些类. 如果您的应用程序使用React, 您应该使用该软件包 .

包括几个通用的功能类:宽相比、底边、间隙和视觉隐藏.

## 安装

样式表参考我们 [设计符号](https://www.npmjs.com/package/@amsterdam/design-system-tokens)。 。 。 . 这两个软件包都需要安装.

```sh
npm install @amsterdam/design-system-css @amsterdam/design-system-tokens
```

## 使用量

构件的系列可视为其标出和特征的蓝图. 一个 `.ams-component` root 选择器将组件的基本样式应用到其元素中,并添加类如 `.ams-component--variant` 修改其外观或行为.

各班雇用 [nL 设计系统的命名公约](https://nldesignsystem.nl/handboek/developer/architectuur#bem-class-names-voor-css)。 。 。 . 其他社区只需覆盖设计标志,即可使用我们的组件并使用其品牌.

### 在联合来文十中

导入主样式表并在标记中使用类名 .

```tsx
import "@amsterdam/design-system-assets/font/index.css"
import "@amsterdam/design-system-css/dist/index.css"
import "@amsterdam/design-system-tokens/dist/index.css"

export const App = () => (
  <p className="ams-paragraph">Hello, world!</p>
)
```

### 在 HTML 中

虽然这不是典型的使用例,但样式表可以直接包含在HTML页面中.

```html
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="node_modules/@amsterdam/design-system-assets/font/index.css" />
    <link rel="stylesheet" href="node_modules/@amsterdam/design-system-css/dist/index.css" />
    <link rel="stylesheet" href="node_modules/@amsterdam/design-system-tokens/dist/index.css" />
  </head>
  <body class="ams-body">
    <p class="ams-paragraph">Hello, world!</p>
  </body>
</html>
```

### 压缩模式

[装入紧凑符号](https://github.com/Amsterdam/design-system/blob/main/packages-proprietary/tokens/README.md) 用于设计系统的紧凑外观,例如用于信息密度高的内部网站. 它们覆盖了宽敞的;样式表可以保持不变.

### Lo-fi 模式

[装入 Lo-fi 令牌](https://github.com/Amsterdam/design-system/blob/main/packages-proprietary/tokens/README.md) 以草图形式介绍各页,例如,保持以结构和内容为重点的设计审查. 它们覆盖了默认的外观; 样式表在这里也可以保持不变 .

### 全局样式

您文档中的某些内容无法达到设计系统组件. 然而,他们的风格可以影响组件的外观.

#### 在身体上设置一个课

添加数据 `ams-body` 分类到文档 `<body>` 标签. 这将删除浏览器可能添加的空白 . 在 Contracting 模式中,它也设置了背景颜色来无缝匹配Page组件.

我们没有单独的全局重置样式表. 这来源于基于我们组件的架构:每个组件会覆盖用户代理样式,覆盖它们提供的元素. 您不需要重设样式表 .

#### 保留底字体大小

不更改基本字体大小 - 例如通过 `html { font-size: 62.5% }`。 。 。 . 我们的打字系统预计 `1rem` 成为16像素的浏览器默认值.

## 更新

我们遵循语义 版本并发布一个 [更改日志](https://github.com/Amsterdam/design-system/blob/main/packages/css/CHANGELOG.md) 引导您通过更新. 这些班级是设计系统的公共API. 请注意, 检测更改或删除的类仍然是一个手工过程 .

## 支助

如果你有问题,找到问题,或者想做贡献,请联系我们. 想办法联系我们 [设计系统.amsterdam](https://designsystem.amsterdam/?path=/docs/docs-introduction--docs#send-a-message)。 。 。 .

## 常见问题

### @amsterdam/design-system-css 是什么？

阿姆斯特丹设计系统和一些一般公用事业的所有组件的样式表。 用它来应用阿姆斯特丹城的外观设计来应用到你的HTML元素或非反应组件\.

### 如何安装 @amsterdam/design-system-css？

在项目目录运行 npm install @amsterdam/design-system-css，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@amsterdam/design-system-assets（2\.7\.0）、@amsterdam/design-system-tokens（4\.4\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @amsterdam/design-system-css 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/amsterdam\_\_design-system-css 是否存在。

### @amsterdam/design-system-css 可以商用吗？

@amsterdam/design-system-css 使用 EUPL-1\.2 许可。声明的许可为 EUPL-1\.2，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @amsterdam/design-system-css 的下载量有多少？

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

### @amsterdam/design-system-css 还在维护吗？

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