# @amsterdam/asc-ui 中文文档

规范地址：https://npmcn.com/package/%40amsterdam/asc-ui/

版本：0\.38\.0
npm 元数据更新时间：2026-03-26T12:50:50.215Z
中文译文更新时间：2026-11-08T10:33:36.108Z
软件包许可：MPL-2\.0

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

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

弃用说明：Amsterdam Styled Components is no longer supported\. Use Amsterdam Design System \(https://designsystem\.amsterdam\) instead\.

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

- 包体积（解压后）：2.1 MB，2627 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react ^17\.0\.2 \|\| ^18\.1\.0，react-dom ^17\.0\.2 \|\| ^18\.1\.0，styled-components ^5\.3\.0
- 首次发布：2020-09-22T09:39:32.178Z
- 最新版本发布：2022-11-28T11:19:22.184Z
- 近 30 天下载量：1799（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：92（近 12 个月 0 个）

## 中文简介

反应在 De Gemeente 阿姆斯特丹 开发者可以在多个项目中重复使用的 UI 组件

## 安装

```sh
npm install @amsterdam/asc-ui
```

也可以使用：`pnpm add @amsterdam/asc-ui`、`yarn add @amsterdam/asc-ui`、`bun add @amsterdam/asc-ui`

## README

# 阿姆斯特丹样式组件 UI

这是样式组件的 React 执行

## 安装

通过运行将此软件包添加到您的工程中 :

```bash
npm install @amsterdam/asc-ui
```

## 使用量

咨询 [带有组件故事本的演示站点](https://amsterdam.github.io/amsterdam-styled-components) 查看可用的组件和示例

### 现有样式的基本调整

```jsx
import styled from 'styled-components'
import { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'

const StyledList = styled(List)`
  background-color: ${themeColor('tint', 'level5')};

  @media screen and ${breakpoint('min-width', 'laptopM')} {
    background-color: ${themeColor('tint', 'level1')};
  }

  ${styles.ListItemStyle} {
    color: ${themeColor('primary')};
  }

  `

<ThemeProvider>
  <StyledList>
    <ListItem href="/">Item1</ListItem>
    <ListItem href="/">Item2</ListItem>
  </StyledList>
</ThemeProvider>

```

样式列表组件的背景颜色有: `tint.level5` 宽度小于 `laptopM` 断点和 `tint.level1` 宽度大于 `laptopM` 在默认主题中定义了颜色和断点

每个组件都暴露出其样式,可以在另一个组件中使用一个(类)选择器. 这些样式的命名惯例是: `<component-name>` - > (中文) `styles.<component-name>Style`。例如,列表项目有样式。 ListStyle 选择器 . 我们使用曝光选择器将链接列表项目的颜色更改为 `primary` 主题颜色。 在这种情况下,我们不需要创建一个新的StyledLinkedList项目来取代样式. 这正是我们从 Asc 库中 揭示的样式, 用来作为选择者。 在扩展样式时使用公约 `const StyledLinkList = styled(LinkList)` 如示例所示.

通过创建一个新的StyledLinkedList项目也可以实现:

```jsx
import styled from 'styled-components'
import { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'

const StyledList = styled(List)`
  background-color: ${themeColor('tint', 'level5')};

  @media screen and ${breakpoint('min-width', 'laptopM')} {
    background-color: ${themeColor('tint', 'level1')};
  }
`

const StyledListItem - styled(ListItem)`
  color: ${themeColor('primary')};

  ${styles.IconStyle} {
    ${svgFill(themeColor('tint', 'level1'))};
  }

  ${styles.LinkStyle} {

    &:hover {
      ${IconStyle} {
        ${svgFill(themeColor('primary', 'main'))};
      }
    }
  }

`

<ThemeProvider>
  <StyledList>
    <StyledListItem href="/">Item1</StyledListItem>
    <StyledListItem href="/">Item2</StyledListItem>
  </StyledList>
</ThemeProvider>

```

在这个例子中,我们使用图标Style选择器来覆盖列表项目中chevron图标的颜色

## 常见问题

### @amsterdam/asc-ui 是什么？

反应在 De Gemeente 阿姆斯特丹 开发者可以在多个项目中重复使用的 UI 组件注意：该包已被作者标记为弃用——Amsterdam Styled Components is no longer supported\. Use Amsterdam Design System \(https://designsystem\.amsterdam\) instead\.

### 如何安装 @amsterdam/asc-ui？

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

### @amsterdam/asc-ui 支持 TypeScript 吗？

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

### @amsterdam/asc-ui 支持 ESM 还是 CommonJS？

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

### @amsterdam/asc-ui 可以商用吗？

@amsterdam/asc-ui 使用 MPL-2\.0 许可。弱 Copyleft：可以商用，也可以和闭源代码一起使用；但如果分发时修改了 MPL 授权的文件，这些文件的修改需以 MPL 开源。以上为概括，不构成法律意见，请以许可原文为准。

### @amsterdam/asc-ui 的下载量有多少？

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

### @amsterdam/asc-ui 还在维护吗？

最新版本 0\.38\.0 发布于 2022/11/28（3 年前）；至今共发布 92 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/09/22。作者已将其标记为弃用，新项目建议寻找替代方案。