# @codegouvfr/react-dsfr 中文文档

规范地址：https://npmcn.com/package/%40codegouvfr/react-dsfr/

版本：1\.36\.0
npm 元数据更新时间：2026-10-15T13:02:03.672Z
中文译文更新时间：2026-11-10T06:48:38.531Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40codegouvfr/react-dsfr
原文对照：https://npmcn.com/package/%40codegouvfr/react-dsfr/?lang=original
项目主页：https://github.com/codegouvfr/react-dsfr
源码仓库：https://github.com/codegouvfr/react-dsfr

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

- 包体积（解压后）：91.2 MB，3724 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@gouvfr/dsfr-chart ^1\.0\.0
- 首次发布：2022-09-27T23:42:43.936Z
- 最新版本发布：2026-10-15T13:02:03.254Z
- 近 30 天下载量：81703（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：492（近 12 个月 15 个）

## 中文简介

法国国家设计系统反应集成库

## 安装

```sh
npm install @codegouvfr/react-dsfr
```

也可以使用：`pnpm add @codegouvfr/react-dsfr`、`yarn add @codegouvfr/react-dsfr`、`bun add @codegouvfr/react-dsfr`

## README

![](https://github.com/codegouvfr/react-dsfr/releases/download/assets/dsfr-react_repo-card.png)

🇫🇷 _[法国国家设计系统](https://www.systeme-de-design.gouv.fr/) 反应工具包_ 🇫🇷  
  
 [![](https://github.com/codegouvfr/react-dsfr/actions/workflows/ci.yaml/badge.svg)](https://github.com/codegouvfr/react-dsfr/actions)[![](https://img.shields.io/npm/v/@codegouvfr/react-dsfr?logo=npm) ](https://www.npmjs.com/package/@codegouvfr/react-dsfr)[![](https://img.shields.io/bundlephobia/minzip/@codegouvfr/react-dsfr) ](https://bundlephobia.com/package/@codegouvfr/react-dsfr)[![](https://img.shields.io/npm/l/@codegouvfr/react-dsfr)](https://github.com/codegouvfr/react-dsfr/blob/main/LICENSE)

[组成部分文件](https://components.react-dsfr.codegouv.studio/) - 说吧 [指南](https://react-dsfr.codegouv.studio/) - 说吧 [游戏场](https://stackblitz.com/edit/nextjs-j2wba3?file=pages/index.tsx)

法国README版本 [页:1](https://github.com/codegouvfr/react-dsfr/blob/main/README.fr.md)。 。 。 .

> 警告:本设计系统仅用于法国官方公共服务网站.  
> 其主要目的是方便市民识别政府网站. [见术语](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/perimetre-d-application)。 。 。 .

这个模块是一个高级工具包 杠杆 [@gouvfr/ dsfr (英语)](https://github.com/GouvernementFR/dsfr),香草JS/CSS 执行DSFR.

[![image](https://user-images.githubusercontent.com/6702424/224423044-c1823249-eab6-4844-af43-d059c01416af.png)](https://youtu.be/5q88JgXUAY4)

> 虽然这个模块是用 TypeScript 写的,但是在您的应用程序中使用 TypeScript 是可选的(但建议它同时给您和您的代码库带来显著的好处).

-   [x] Fully TypeSafe, 有详细记载的API.
-   [x] 总是在最新的DSFR演化. 代码和类型 [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr)`/dist/dsfr.css`。 。 。 .
-   [x] 完全一样的外表和感觉 比与 [@gouvfr/ dsfr (英语)](https://www.npmjs.com/package/@gouvfr/dsfr)。 。 。 .
-   [x] 没有 [在 SSR 设置中重新装入时出现白色闪光](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480)。 。 。 .
-   [x] 大多数组件已准备好服务器组件 。 其他的标签 `"use client";`
-   [x] [与所有主要反应框架完美整合:Next.js(PagesDir和AppDir),创建反应App,Vite](https://react-dsfr.codegouv.studio/)。 。 。 .
-   [x] (几乎)全部 [组件](https://www.systeme-de-design.gouv.fr/elements-d-interface) 为: [已执行](https://components.react-dsfr.codegouv.studio/)
-   [x] 三个摇摆的发行,樱桃取出你进口的组件. (这不是所有在一个大的.js捆绑)
-   [x] 与 [毛里求斯](https://mui.com/)。如果您使用 MUI 组件,它们将 自动调整为外观 [DSFR组件](https://www.systeme-de-design.gouv.fr/elements-d-interface)。见 [文档](https://react-dsfr.codegouv.studio/mui-integration)。 。 。 .
-   [x] 在联署材料解决方案中启用 CSS . [医生](https://react-dsfr.codegouv.studio/css-in-js)。 。 。 .
-   [x] 以文字构建的Opt-in i18n可以多种语言显示,用户可以提供额外的翻译.
-   [x] [支持路由图书馆](https://react-dsfr.codegouv.studio/routing) 像反应路由器.

> \* 需要准备使用符合DSFR的登录和注册页面吗? 离职 [keycloak 主题文件](https://github.com/codegouvfr/keycloak-theme-dsfr)。 。 。 .

[开始吧](https://react-dsfr.codegouv.studio/)

# 施政

此模块是 [Etalab 自由与开源软件杆](https://code.gouv.fr/en/mission/)。 。 。 .

该项目由法国各行政部门的公务员共同负责:

-   [约瑟夫·加龙](https://github.com/garronej) - 内视
-   [朱利安·布基伦](https://github.com/revolunet) - 国家青年局
-   [迪伦·德克鲁尔](https://github.com/ddecrulle) - 内视
-   [恩盖尔兰·魏斯](https://github.com/enguerranws) - 包容平台

## 发展 -- -- 为项目作出贡献

```bash
git clone https://github.com/codegouvfr/react-dsfr
cd react-dsfr
yarn

# Starting storybook
yarn storybook

# Starting test apps
yarn start-cra  # For testing in a Create React App setup
yarn start-vite # For testing in a Vite setup
yarn start-next-pagesdir # For testing in a Next.js 13 PagesDir setup (the default setup)
yarn start-next-appdir # For testing in a Next.js 13 AppDir setup

# Run all unit test (test/runtime):
yarn test
# Run only test/runtime/cssVariable.test.ts (for example)
npx vitest -t "Resolution of CSS variables"
```

### 想贡献吗?

谢谢! 见 [贡献指南](https://github.com/codegouvfr/react-dsfr/blob/main/CONTRIBUTING.md)。 。 。 .

### 如何发布关于国家预防机制的新版本,如何发布β版本

这回波是靴子被拖走的 [加罗奈克/吨-西](https://github.com/garronej/ts-ci) 看看这个 记录此启动器, 以了解此还原的生命周期 .

## 使用大小写

一些项目使用 `@codegouvfr/react-dsfr`。 。 。 .

-   [https://adresse.data.gouv.fr (英语)](https://adresse.data.gouv.fr/)
-   [https://cartes.gouv.fr (中文(简体) )](https://cartes.gouv.fr/)
-   [https://code.gouv.fr/sill (中文(简体) )](https://code.gouv.fr/sill)
-   [https://diagoriente.beta.gouv.fr 互联网档案馆的存檔,存档日期2013-12-21](https://diagoriente.beta.gouv.fr/)
-   [https://egapro.travail.gouv.fr (中文(简体) )](https://egapro.travail.gouv.fr/)
-   [https://github.com/BaseAdresse Nationale/bal-admin 页面存档备份,存于互联网档案馆](https://github.com/BaseAdresseNationale/bal-admin)
-   [https://github.com/DISIC/monfrance 连通](https://github.com/DISIC/monfranceconnect)
-   [https://github.com/EIG6-Artificia/prepictia front. 互联网档案馆的存檔,存档日期2013-12-12](https://github.com/EIG6-ArtificIA/predictia_front)
-   [https://github.com/EIG6-Geocommuns/地铁-核心](https://github.com/EIG6-Geocommuns/geocommuns-core)
-   [https://github.com/EIG6-Geocommuns/lidarviz-front (英语)](https://github.com/EIG6-Geocommuns/lidarviz-front)
-   [https://github.com/inclucion-numerique/mediture (中文(简体) )](https://github.com/inclusion-numerique/mediature)
-   [https://github.com/InseeFr/Lunatic-DSFR (英语)](https://github.com/InseeFr/Lunatic-DSFR)
-   [https://github.com/SocialGouv/bpco-site 页面存档备份,存于互联网档案馆](https://github.com/SocialGouv/bpco-site)
-   [https://immersion-facile.beta.gouv.fr (英语)](https://immersion-facile.beta.gouv.fr/)
-   [https://maisondelautisme.gouv.fr/ (中文(简体) )](https://maisondelautisme.gouv.fr/)
-   [https://observatoire.numerique.gouv.fr 页面存档备份,存于互联网档案馆](https://observatoire.numerique.gouv.fr/)
-   [https://potentiel.beta.gouv.fr (中文(简体) )](https://potentiel.beta.gouv.fr/)
-   [https://refugies.info (英语)](https://refugies.info/)
-   [https://signal.conso.gouv.fr (中文(简体) )](https://signal.conso.gouv.fr/)
-   [https://territoiresen 过渡.fr](https://territoiresentransitions.fr/)
-   [https://www.mediateur-public.fr (中文(简体) )](https://www.mediateur-public.fr/)
-   [https://suitedroitiese.anct.gouv.fr 互联网档案馆的存檔,存档日期2013-12-22](https://suiteterritoriale.anct.gouv.fr/)

## 常见问题

### @codegouvfr/react-dsfr 是什么？

法国国家设计系统反应集成库

### 如何安装 @codegouvfr/react-dsfr？

在项目目录运行 npm install @codegouvfr/react-dsfr，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 react-dsfr、copy-dsfr-to-public、only-include-used-icons，可以用 npx react-dsfr 直接运行。

### @codegouvfr/react-dsfr 支持 TypeScript 吗？

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

### @codegouvfr/react-dsfr 支持 ESM 还是 CommonJS？

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

### @codegouvfr/react-dsfr 可以商用吗？

@codegouvfr/react-dsfr 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @codegouvfr/react-dsfr 的下载量有多少？

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

### @codegouvfr/react-dsfr 还在维护吗？

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