# @datapunt/asc-ui 中文文档

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

版本：0\.24\.4
npm 元数据更新时间：2022-04-05T03:02:00.677Z
中文译文更新时间：2026-11-14T16:03:58.872Z
软件包许可：MPL-2\.0

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

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

弃用说明：@datapunt/asc-ui is deprecated install @amsterdam/asc-ui instead

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

- 包体积（解压后）：2.1 MB，2701 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react \>=16\.8\.6，react-dom \>=16\.8\.6，styled-components \>=4\.4\.1
- 首次发布：2019-03-06T17:36:12.977Z
- 最新版本发布：2020-09-21T11:07:27.968Z
- 近 30 天下载量：1991（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：304（近 12 个月 0 个）

## 中文简介

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

## 安装

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

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

## README

# 阿姆斯特丹样式组件 UI

这是样式组件的 React 执行

## 安装

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

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

## 使用量

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

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

```jsx
import styled from 'styled-components'
import { themeColor, List, breakpoint, styles, ThemeProvider } from '@datapunt/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 '@datapunt/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图标的颜色

## 常见问题

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

反应在 De Gemeente 阿姆斯特丹 开发者可以在多个项目中重复使用的 UI 组件注意：该包已被作者标记为弃用——@datapunt/asc-ui is deprecated install @amsterdam/asc-ui instead

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

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

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

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

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

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

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

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

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

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

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

最新版本 0\.24\.4 发布于 2020/09/21（6 年前）；至今共发布 304 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/03/07。作者已将其标记为弃用，新项目建议寻找替代方案。