# @db-ux/react-core-components 中文文档

规范地址：https://npmcn.com/package/%40db-ux/react-core-components/

版本：6\.3\.2
npm 元数据更新时间：2026-11-11T12:59:49.838Z
中文译文更新时间：2026-11-11T18:27:52.360Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40db-ux/react-core-components
原文对照：https://npmcn.com/package/%40db-ux/react-core-components/?lang=original
源码仓库：https://github.com/db-ux-design-system/core-web

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

- 包体积（解压后）：891 kB，550 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2025-02-13T13:53:11.622Z
- 最新版本发布：2026-11-11T12:59:49.356Z
- 近 30 天下载量：5225（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：200（近 12 个月 119 个）

## 中文简介

@db-ux/核心组件的响应组件

## 安装

```sh
npm install @db-ux/react-core-components
```

也可以使用：`pnpm add @db-ux/react-core-components`、`yarn add @db-ux/react-core-components`、`bun add @db-ux/react-core-components`

## README

# @db-ux/反应-核心组件

![Apache 2.0 license badge](https://img.shields.io/badge/License-Apache_2.0-blue.svg) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com/)

包含所有样式和组件的 React 库 [DB UX 设计系统(技术部件)](https://github.com/db-ux-design-system/core-web)。 。 。 . 我们还提供了有关具体组成部分的更多信息。 这个信息在我们 [设计系统文件](https://design-system.deutschebahn.com/documentation/get-started/)。 。 。 .

## 安装

```shell
pnpm add @db-ux/react-core-components @db-ux/core-components @db-ux/core-foundations --save-dev
```

## 型态依赖

### 虚拟插件

如果你使用维特,你可以使用 [`@db-ux/core-vite-plugin`](https://www.npmjs.com/package/@db-ux/core-vite-plugin) 它简化了 CSS 设置为单一导入.

```shell
pnpm add @db-ux/core-vite-plugin --save-dev
```

将插件添加到您的 `vite.config.ts`数字 :

```ts
import { defineConfig } from "vite";
import dbUxPlugin from "@db-ux/core-vite-plugin";

export default defineConfig({
    plugins: [dbUxPlugin()]
});
```

然后导入您的 CSS 文件的插件 :

```css
/* index.css */
@import "@db-ux/core-vite-plugin/index.css";
```

📖 **[学习更多关于 `@db-ux/core-vite-plugin` 节点软件包](https://www.npmjs.com/package/@db-ux/core-vite-plugin)**

### PostCSS 插件( 建议)

我们建议使用 [`@db-ux/core-postcss-plugin`](https://www.npmjs.com/package/@db-ux/core-postcss-plugin) 以减小你的捆绑大小。 它通过解析 CSS 自定义属性来平分 `var()`, (中文(简体) ), `calc()`, (中文(简体) ), `color-mix()`,以及 `light-dark()` ,删除未使用的申报.

```shell
pnpm add @db-ux/core-postcss-plugin --save-dev
```

装入 `vite.config.ts`数字 :

```ts
import { defineConfig } from "vite";
import { dbUxFlatten } from "@db-ux/core-postcss-plugin";

export default defineConfig({
    css: {
        transformer: "postcss", // required for Vite 8+ (default: 'lightningcss')
        postcss: {
            plugins: [dbUxFlatten()]
        }
    }
});
```

📖 **[学习更多关于 `@db-ux/core-postcss-plugin` 节点软件包](https://www.npmjs.com/package/@db-ux/core-postcss-plugin)**

### 手动 CSS 设置

如果您没有使用Vite或偏好手动设置, 请导入您 CSS 主文件中的样式 :

```css
/* index.css */
@layer whitelabel-theme, db-ux;
/* You may want to include another theme here, this is a whitelabel theme! So instead of including the following line of code, please have a look at the DB Theme section */
@import "@db-ux/core-foundations/build/styles/theme/rollup.css"
    layer(whitelabel-theme);

@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
```

### 视频 8

从Vite 8开始,默认的 CSS 修饰符被修改为 [闪电CSS](https://lightningcss.dev/),它为DB UX设计系统(例如. `light-dark()` CSS 函数). 保持 CSS 输出稳定, 配置 `vite.config.ts` 像这样:

```ts
// vite.config.ts
export default defineConfig({
    build: {
        cssMinify: "esbuild"
    }
});
```

> 或者,您可以定义 [浏览器列表](https://browsersl.ist/) 基于您个人浏览器支持策略——它可能与默认定义的Vite 8 列表(从2020年代初开始的目标浏览器)完全不同:

```ts
// Note: You need to install the required packages first:
// npm install -D lightningcss browserslist

// vite.config.ts
import { browserslistToTargets } from "lightningcss";
import browserslist from "browserslist";

export default defineConfig({
    css: {
        lightningcss: {
            targets: browserslistToTargets(
                browserslist(
                    ">= 0.5%, last 2 major versions, Firefox ESR, not dead"
                )
            )
        }
    }
});
```

### 下个16个

从下16起,默认的 CSS 修改为 [闪电CSS](https://lightningcss.dev/),它为DB UX设计系统(例如. `light-dark()` CSS 函数). 我们可以提供必要的具体配置,以在不久的将来缓解这些问题。 同时保持CSS输出稳定,配置 `next.config.ts` 像这样:

```ts
// next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    experimental: {
        useLightningcss: true,
        lightningCssFeatures: {
            exclude: ["light-dark"]
        }
    }
};

export default nextConfig;
```

### DB 主题

若您正在为 Deutsche Bahn 建立一个网站或应用程序,您还需通过 [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) 节点包(甚至也可以作为内源节点包提供,如该包所描述的README).

## 使用量

```tsx
import { DBButton } from "@db-ux/react-core-components";

<DBButton variant="brand" onClick={() => console.log("clicked")}>
    Add item to cart
</DBButton>;
```

## AI 代理支持

对于使用GitHub Copilot或Amazon Q等AI编码助理的开发者,我们提供 [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) 自动将 DB UX 设计系统文档添加到您的仓库的工具.

### 快速启动

在您的仓库中运行此命令 :

```shell
npx @db-ux/agent-cli
```

这将创建或更新 `.github/copilot-instructions.md` 根据您安装的组件文档 `@db-ux` 软件包,帮助AI代理商提供更好的建议.

📖 **[学习更多关于 `@db-ux/agent-cli` 节点软件包](https://www.npmjs.com/package/@db-ux/agent-cli)**

## 代码质量

为了在您的 React 项目中强制正确使用 DB UX 设计系统组件, 我们提供 [`@db-ux/core-eslint-plugin`](https://www.npmjs.com/package/@db-ux/core-eslint-plugin) ESLint 插件 .

### 安装

```shell
pnpm add eslint @db-ux/core-eslint-plugin @typescript-eslint/parser --save-dev
```

### 设置

```js
// eslint.config.js
import dbUx from "@db-ux/core-eslint-plugin";
import tsParser from "@typescript-eslint/parser";

export default [
    {
        files: ["**/*.ts", "**/*.tsx"],
        languageOptions: {
            parser: tsParser,
            parserOptions: {
                ecmaVersion: "latest",
                sourceType: "module",
                ecmaFeatures: { jsx: true }
            }
        },
        plugins: {
            "db-ux": dbUx
        },
        rules: dbUx.configs.recommended.rules
    }
];
```

📖 **[学习更多关于 `@db-ux/core-eslint-plugin` 节点软件包](https://www.npmjs.com/package/@db-ux/core-eslint-plugin)**

## 样式林

为了在您的 CSS/ SCSS 中验证对 DB UX 设计系统符号的正确使用, 请使用 [`@db-ux/core-stylelint`](https://www.npmjs.com/package/@db-ux/core-stylelint) 插件 .

### 安装

```shell
pnpm add stylelint @db-ux/core-stylelint --save-dev
```

### 设置

添加到您的 `.stylelintrc.json`数字 :

```json
{
    "plugins": ["@db-ux/core-stylelint"],
    "rules": {
        "db-ux/use-spacings": [true],
        "db-ux/use-sizing": [true],
        "db-ux/use-border-width": [true],
        "db-ux/use-border-radius": [true],
        "db-ux/use-border-color": [true]
    }
}
```

📖 **[学习更多关于 `@db-ux/core-stylelint` 节点软件包](https://www.npmjs.com/package/@db-ux/core-stylelint)**

## 德国Bahn品牌

由于我们想在数字化旅程中完全支持我们的用户和客户,即使使用我们提供的这个产品代码,Deutsche Bahn品牌和商标的使用也有明确的指导方针和限制; Deutsche Bahn完全保留了对Deutsche Bahn品牌的所有权利,尽管我们正在提供DB UX Design System产品的代码,根据Apache 2.0许可证可以自由使用并发布. 请看看我们的品牌门户 [https://marketingportal.extranet.deutschebahn.com/ 页面存档备份,存于互联网档案馆](https://marketingportal.extranet.deutschebahn.com/) 就任何品牌问题与谁联系.

对于德国Bahn网站和应用程序以外的任何用途,你不得使用任何德国Bahn品牌和 设计资产以及受保护的特征和商标,用于不包括DB主题.

## 捐款

发言非常受欢迎,请参看 [捐款指南](https://github.com/db-ux-design-system/core-web/blob/main/CONTRIBUTING.md)。 。 。 .

## 行为守则

作为成员、贡献者和领导人,我们保证参与我们的工作 人人无骚扰的体验 [《公约》的行为守则](https://github.com/db-ux-design-system/.github/blob/main/CODE-OF-CONDUCT.md)。 。 。 .

## 许可证

这个项目的许可证根据 [阿帕奇 - 2.0](https://npmcn.com/package/%40db-ux/react-core-components/LICENSE)。 。 。 .

## 常见问题

### @db-ux/react-core-components 是什么？

@db-ux/核心组件的响应组件

### 如何安装 @db-ux/react-core-components？

在项目目录运行 npm install @db-ux/react-core-components，或使用 pnpm add / yarn add / bun add。

### @db-ux/react-core-components 支持 TypeScript 吗？

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

### @db-ux/react-core-components 支持 ESM 还是 CommonJS？

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

### @db-ux/react-core-components 可以商用吗？

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

### @db-ux/react-core-components 的下载量有多少？

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

### @db-ux/react-core-components 还在维护吗？

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