# @42-central/ui-react 中文文档 规范地址：https://npmcn.com/package/%4042-central/ui-react/ 版本：0\.26\.0 npm 元数据更新时间：2026-11-04T16:51:05.048Z 中文译文更新时间：2026-11-06T06:12:20.496Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%4042-central/ui-react 原文对照：https://npmcn.com/package/%4042-central/ui-react/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：12.9 MB，1854 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：10 个 - peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，tailwindcss ^4\.0\.0，@ark-ui/react ^5\.38\.2，@tanstack/charts ^0\.18\.0，@tanstack/react-table ^9\.2\.4，@tanstack/react-router ^1\.170\.0 - 首次发布：2026-10-08T14:39:42.908Z - 最新版本发布：2026-11-04T16:51:04.464Z - 近 30 天下载量：4571（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：18（近 12 个月 18 个） ## 中文简介 42个工具的回放UI工具包 ## 安装 ```sh npm install @42-central/ui-react ``` 也可以使用：`pnpm add @42-central/ui-react`、`yarn add @42-central/ui-react`、`bun add @42-central/ui-react` ## README ![@42-central/ui-react](https://shieldcn.dev/header/dots.svg?title=UI+React&subtitle=Code-themed+React+UI+kit+for+42%27s+apps&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAMFBMVEUAAAD%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F87TQQwAAAAD3RSTlMAAw4fKzNGVm%2BMn73c6vz7344aAAACqklEQVR42u3ZMWsUQRjG8ed9jaA2N5fWQswnEMVG1I9gpXZKvsGdnVZ3VpdClBQi2KlgI5b2fgobI3baOXOI3mJgx5Bb8Hb21tkwN2%2BMef%2BQIrs7PPyyaY6DpmmapmmapmmHnUH%2BiDbCMG89vH4xvHC%2BM%2BTqp6APNL%2FxOLzxKLzwlQBGPPr%2BaiPoeQ%2F7hcSzjScNuo30rpzz1ju4%2Bc9es22Hee7Pde%2B929p7cvGa9egWnfhs%2FWKl3zTYzzyxtRsFrvt65YwA7gQxWGxavHBY1nTLYFnc4Y28nGIxbx70sCx%2F%2BiFiI90h222QXnwkHeJaRgQgYAEIWAACFoCABSBgAQhYAAIWgIAFIGABCFgAAhaAgAUgYAEIWAACFoCABSDgdMiZGAScDnkWg4DTIfdcdEQAAhaAgBMh1AECToOgCwScBkEIMS0jKZDdEOLQMXOt9LXsjLC8C%2BHRgQ2O%2FqCun0eGBp2ik7Z5NBUSZu42jirkH4P8lIBsKkQhhwwpJCBjhShEIX%2BDWAHIN4Xov9YRfiMSEF9QP1IKpGqIlUFMC6T8dflWpJvV0Rvh3%2BBLACGqnhyFkNLH2qXgm6Aq%2Bz6ETKjtIzYiebRFrv7rbAiAkbXefWQfodmoGskOAeeFjF01khPiTe4RKsZT5B7pTbzJPULFcA4BC0DAAhCwAAQsAAHng1iTe4SKASEYyQBxJhjJCwELQMACELAABCwAAQtAwAIQcDZIOOJtrCQI1gCgv1rIaGrQkHx8E%2ButPxDEoDHiXt%2BOdedAb2QKNCXUj7SOJAg4%2Bb3HIWCsuGKA7CN%2B4gzC1rDSzKkhsOIR9%2FQd6pFHvdInS3Z20CFGUtSPZZAs8VZAAuiIjuiIjuiIjuiIjhyfEVvLIUN8KQxHtX6QgaZpmqZpmqZpmvbf9xsJbA7rTAka4wAAAABJRU5ErkJggg%3D%3D&mode=dark&font=fira-code) [![npm version](https://shieldcn.dev/npm/v/@42-central/ui-react.svg)](https://www.npmjs.com/package/@42-central/ui-react) [![React 19](https://shieldcn.dev/badge/React-19-58c4dc.svg?logo=react)](https://react.dev/) [![Tailwind v4](https://shieldcn.dev/badge/Tailwind-v4-00bcff.svg?logo=tailwindcss)](https://tailwindcss.com/) [![Ark UI 5](https://shieldcn.dev/badge/Ark_UI-5-7C3AED.svg)](https://ark-ui.com/) ![ESM only](https://shieldcn.dev/badge/module-ESM--only-F7DF1E.svg) [安装](https://npmcn.com/package/%4042-central/ui-react/#readme-install) • 妇女 [样式](https://npmcn.com/package/%4042-central/ui-react/#readme-wire-up-the-styles) • 妇女 [主题](https://npmcn.com/package/%4042-central/ui-react/#readme-theme-lightdarksystem) • 妇女 [进口](https://npmcn.com/package/%4042-central/ui-react/#readme-subpath-imports) • 妇女 [**现场医生**](https://42kit.dev/) * * * 代码主题,RSC友好, **仅限无害环境管理** 42号内线的UI包. ## 安装 该工具包在公共npm注册为 `@42-central/ui-react`。无 需要证书: ```bash npm install @42-central/ui-react @ark-ui/react react react-dom tailwindcss pnpm add @42-central/ui-react @ark-ui/react react react-dom tailwindcss yarn add @42-central/ui-react @ark-ui/react react react-dom tailwindcss bun add @42-central/ui-react @ark-ui/react react react-dom tailwindcss ``` `@ark-ui/react`, (中文(简体) ), `react`, (中文(简体) ), `react-dom` (所有反应19)和 `tailwindcss` v4为 相对依赖. > 消费者 `tsconfig.json` 必须使用 `"moduleResolution": "Bundler"` (或 `"NodeNext"`) (中文(简体) ). 用维特? 添加 `@42-central/vite-plugin-theme` 用于无闪光的主题 装入( 见 [维特](https://npmcn.com/package/%4042-central/ui-react/#readme-vite-client-only-spa)) (中文(简体) ). ## 连接样式 工具箱将它的 Tailwind 主题和调色板作为普通的 CSS 传送—— 没有插件 登记。 在您的全局样式表中选择两个模式之一 . **备选案文A——有意见(一行).** 在Tailwind,主题,和a `@source` 覆盖扫描已建套件: ```css @import "@42-central/ui-react/styles.css"; ``` **选项B——全控(推荐应用代码).** 导入尾风和 主题你自己,和点 `@source` 在安装的软件包中生产 将所使用的类保留在组件内: ```css @import "tailwindcss"; @import "@42-central/ui-react/theme.css"; @source "../node_modules/@42-central/ui-react/dist/**/*.js"; ``` 选项 A 跳过 `@source` 因此,生产架构可能错过动态 组件内部使用的类——与选项B相接,除非您有完整的 超时班级报道. 本地单列坡开发点 `@source` 时间 源树代替——见 `apps/docs/app/global.css` 以实例为例. ## 主题(浅/暗/系统) `useTheme()` 坚持一个明确的 `"light" | "dark" | "system"` 选择并保留 `data-theme` 打开 `` ——该属性是整个合同(即 `@custom-variant dark` 内 `theme.css` (见上文)。 避免错误的闪光 主题需要运行的脚本 **在此之前** 您的应用程序的JS做的; 您如何交付 框架不同. ### Next.js (App路由器/RSC) (英语) 渲染器 `ThemeScript` 从服务器组件,尽可能早(例如: 第一个孩子 ``标记根 `` `suppressHydrationWarning` (脚本集) `data-theme` 在反应水合之前: ```tsx // app/layout.tsx import { ThemeScript } from "@42-central/ui-react/theme-script"; export default function Layout({ children }: LayoutProps<"/">) { return ( {children} ); } ``` ```tsx "use client"; import { useTheme } from "@42-central/ui-react"; export function ThemeToggle() { const { resolvedTheme, setMode } = useTheme(); const next = resolvedTheme === "dark" ? "light" : "dark"; return ( ); } ``` ### Vite( 仅限客户 SPA) 没有服务器渲染步骤,所以反应 `ThemeScript` 组件不能帮助 - 当反应可以插入时 ` ``` 这是通过 `data-*` 属性在自己的标签上(不需要构建步骤) 复制一次: | 属性 | 匹配 `useTheme()` 选项 | | --- | --- | | `data-storage-key` | `storageKey` | | `data-default-color-scheme` | `defaultColorScheme` | | `data-force-color-scheme` | `forceColorScheme` | | `data-attribute` | `attribute` 以逗号分隔,例如:. `"class,data-theme"` | **3\. 人工粘贴,作为最后手段** (非 Vite 捆绑器, 完全定制设置) ——字面输出 `buildThemeInitScript()`数字 : ```html ``` 重新生成此块( R)`import { buildThemeInitScript } from "@42-central/ui-react"`(中文(简体) ) 随时更新软件包,以防其内部变化. `useTheme()` 作品在其中任何一个之后都相同——相同的钩子,没有Vite特定的API. ### 强制或默认颜色方案 `defaultColorScheme` 覆盖未存储时使用的倒置 (单位:千美元)`"system"` 除非设定). `forceColorScheme` 针头 `mode`编号 :`resolvedTheme` 改为 已固定 `"light"`编号 :`"dark"` 值和转 `setMode` 改为无操作——用于 页面,无论访客的偏好如何,必须设置一个方案(例如:. a 专题营销页或嵌入页). 没有一个提供者持有这个配置在一个地方,所以两个选项 必须完全通过 **每个** `useTheme()` 呼叫网站 _财务报告和审定财务报表_ `` (或被粘贴的维特脚本)——否则水分前置 脚本和钩子在第一个负载上可以有分歧. 这不是一个空白与缺乏 提供商:Mantine,它确实有一个(a)`MantineProvider`),文档 同样的要求 `forceColorScheme` - "必须同时设置" 打开 `MantineProvider` 财务报告和审定财务报表 `ColorSchemeScript`因为剧本总是运行 在任何提供者存在之前. ```tsx // app/layout.tsx ``` ```tsx "use client"; const { resolvedTheme, setMode } = useTheme({ forceColorScheme: "dark" }); // resolvedTheme is always "dark"; setMode is a no-op while forced. ``` ### 驾驶a `.dark` 类也 `data-theme` 包件本身的合同(`theme.css`是因为 `@custom-variant dark`),但其他CSS你(英语: 不要控制 可能会按字面 `.dark` 类取而代之—— Tailwind 默认值 `dark` 战略, 其它组件库,或者(如本 repo 自己的docs site) Fumadocs 捆绑样式。 过 `attribute` (叹气) `next-themes`' 同名选项) `@42-central/ui-react` 也开吧, 而不是手卷自己的镜像脚本/观测器 : ```tsx // app/layout.tsx ``` ```tsx "use client"; const { resolvedTheme, setMode } = useTheme({ attribute: ["class", "data-theme"], }); ``` 喜欢 `storageKey`编号 :`defaultColorScheme`编号 :`forceColorScheme`, (中文(简体) ), `attribute` 必须完全通过 两者 `` (或被贴上Vite脚本)和每个 `useTheme()` 呼叫站点, 相同 原因——没有提供者持有这个配置在一个地方. 通过 `attribute: "class"` 单独(无) `"data-theme"`)也得到支持,如果你真的不需要工具箱自己的合同来获得 给定的页面 `resolvedTheme` 读取 `.dark` 直接上课. ### 停止颜色转换 如果您的 CSS 中的任何一种颜色/ 背景/ 边框属性转换, 请切换 主题使得它通过互换而明显活跃起来——所以过渡是 **默认被关闭** 每个应用更改周围有一个框架(单击 切换,操作系统偏好在打开时翻转 `"system"` 模式,并恢复 聚焦到主题在别处改变的标签上。 过 `keepTransitions` (模仿曼汀语中同名选项) 选择回归正常 过渡行为 : ```tsx const { resolvedTheme, setMode } = useTheme({ keepTransitions: true }); ``` ### 带有更新器的循环模式 `setMode` 还接受 `useState`\- 风格更新器, 一次解决当前 `mode` —— 说 用于循环所有三个值而不是双向切换的单个按钮: ```tsx const NEXT = { light: "dark", dark: "system", system: "light" } as const; const { mode, setMode } = useTheme(); ; ``` ## 子路径导入 组件边界上的树摇: ```tsx import { Button } from "@42-central/ui-react/button"; import { Modal } from "@42-central/ui-react/modal"; import { ThemeScript } from "@42-central/ui-react/theme-script"; import { cn } from "@42-central/ui-react/cn"; ``` 软件包根( R)`@42-central/ui-react`只有再出口共享的公用事业和类型—— `cn`, (中文(简体) ), `COLORS` 编号 : `Color`, (中文(简体) ), `SIZES` 编号 : `Size`, (中文(简体) ), `FormControlProps`, (中文(简体) ), `useLogger`,以及 `useTheme` 编号 : `ThemeMode` 编号 : `ResolvedTheme`. 组成部分靠自己生活 副道所以捆绑者从来不拉 整套. ## 链接 - [实时文件和组件参考](https://42kit.dev/) - [更改日志](https://42kit.dev/docs/changelog) - [来源于 GitHub](https://github.com/42staff/kit) ## 常见问题 ### @42-central/ui-react 是什么？ 42个工具的回放UI工具包 ### 如何安装 @42-central/ui-react？ 在项目目录运行 npm install @42-central/ui-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）、tailwindcss（^4\.0\.0）、@ark-ui/react（^5\.38\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @42-central/ui-react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @42-central/ui-react 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @42-central/ui-react 可以商用吗？ @42-central/ui-react 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。 ### @42-central/ui-react 的下载量有多少？ 根据 npm 官方下载统计，@42-central/ui-react 在 2026/10/05 – 2026/11/03 这 30 天内被下载 4,571 次，日均约 152 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @42-central/ui-react 还在维护吗？ 最新版本 0\.26\.0 发布于 2026/11/05（1 天前）；至今共发布 18 个版本，其中过去 12 个月发布了 18 个；首次发布于 2026/10/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。