# @brightlayer-ui/react-components 中文文档 规范地址：https://npmcn.com/package/%40brightlayer-ui/react-components/ 版本：8\.0\.6 npm 元数据更新时间：2026-11-02T06:15:40.788Z 中文译文更新时间：2026-11-08T15:21:32.091Z 软件包许可：BSD-3-Clause 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40brightlayer-ui/react-components 原文对照：https://npmcn.com/package/%40brightlayer-ui/react-components/?lang=original 项目主页：https://github.com/etn-ccis/blui-react/blob/dev/packages/component-library/README.md 源码仓库：https://github.com/etn-ccis/blui-react#dev ## 关键信息（来自 npm 元数据） - 包体积（解压后）：424 kB，231 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：9 个 - peer 依赖：react ^19\.1\.0，react-dom ^19\.1\.0，@mui/material ^7\.1\.1，@emotion/react ^11\.7\.1，@emotion/styled ^11\.6\.0，@mui/icons-material ^7\.1\.1，@brightlayer-ui/colors ^3\.3\.0 - 首次发布：2021-11-11T16:57:09.076Z - 最新版本发布：2026-11-02T06:15:40.543Z - 近 30 天下载量：18261（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：43（近 12 个月 10 个） ## 中文简介 Brightlayer UI 应用程序的反应组件 ## 安装 ```sh npm install @brightlayer-ui/react-components ``` 也可以使用：`pnpm add @brightlayer-ui/react-components`、`yarn add @brightlayer-ui/react-components`、`bun add @brightlayer-ui/react-components` ## README # 亮层 UI 反应组件 [![Build](https://github.com/etn-ccis/blui-react-component-library/actions/workflows/blui-ci.yml/badge.svg?branch=master)](https://github.com/etn-ccis/blui-react-component-library/actions/workflows/blui-ci.yml) ![npm](https://img.shields.io/npm/v/@brightlayer-ui/react-components?label=%40brightlayer-ui%2Freact-components) [![codecov](https://codecov.io/gh/etn-ccis/blui-react-component-library/branch/master/graph/badge.svg?token=HQFW5YF7WP)](https://codecov.io/gh/etn-ccis/blui-react-component-library) 这是一个用于Brightlayer UI应用程序的可再用React组件库. 这些组件大多是为了简化您的应用程序的构建,提供即时组件,在Brightlayer UI中执行常见的用例,并消除多个团队为这些组件自建组件的需要. 参见 [构成部分库](https://brightlayer-ui-components.github.io/react) API 文档网站,用于列出可用的组件列表和每个单个组件的文件. ## 安装 要安装来自国家防范机制的 Brightlayer UI 响应组件作为您的项目的依赖性, 您可以在您的项目根中运行以下命令 : ```shell yarn add @brightlayer-ui/react-components ``` ## 使用量 见 [开发者文档](https://brightlayer-ui-components.github.io/react) 关于使用这些组件的详细资料的网址. > 与 MUI 6+ 使用时,您必须使用 @brightlayer-ui/ react- 组件的 第 7 版 和 @brightlayer-ui/ react-主题的 第 8 版 . ## 从v7到v8的迁移 随着版本7的发布,Brightlayer UI React Inductions已经被更新到使用 Material UI v7. BLUI组件的用法保持不变,但您的项目可能需要一些更新来迁移到MUI v7. 你可以指: 官员 [MUI 移民文件](https://mui.com/material-ui/migration/upgrade-to-v7/) 关于升级步骤的细节. ## 浏览器支持 Blightlayer UI 库会与任何现代浏览器合作. 详情请参见我们 [浏览器支持](https://brightlayer-ui.github.io/development/frameworks-web/react#browser-support) 文档. # 维护者 ## 图书馆的建设 要与此库合作, 请先在库中复制并安装依赖性 : ```shell git clone https://github.com/etn-ccis/blui-react-component-library cd react-component-library yarn initialize ``` 库可以通过运行以下命令来构建. 由此产生的产出将放在/dist文件夹中. ```shell yarn build ``` ## 运行演示项目和 React 组件库 API Docs 此寄存器带有一个演示项目 `/demos` 文件夹. Showcase 项目( 来自 [反应- 显示大小写- 演示](https://github.com/etn-ccis/blui-react-showcase-demo)),在现实界面中显示组件组合. 这个 [反应- 显示大小写- 演示](https://blui-react-showcase.web.app/templates/dashboard) 作为Brightlayer UI连续集成的一部分部署. /docs文件夹中发现的第二个项目是: [反应组件库](https://github.com/etn-ccis/blui-react-component-library/tree/master/docs) API 文档,允许您在孤立状态下看到组件,并与其属性交互. 这个 [反应组件库](https://brightlayer-ui-components.github.io/react/) 作为Brightlayer UI连续集成的一部分部署. 您可以通过运行来构建、链接和启动应用程序 ```shell yarn start:showcase ``` 或者说 ```shell yarn start:docs ``` 从根目录. ## 常见问题 ### @brightlayer-ui/react-components 是什么？ Brightlayer UI 应用程序的反应组件 ### 如何安装 @brightlayer-ui/react-components？ 在项目目录运行 npm install @brightlayer-ui/react-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.1\.0）、react-dom（^19\.1\.0）、@mui/material（^7\.1\.1）、@emotion/react（^11\.7\.1）、@emotion/styled（^11\.6\.0）、@mui/icons-material（^7\.1\.1）、@brightlayer-ui/colors（^3\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @brightlayer-ui/react-components 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @brightlayer-ui/react-components 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @brightlayer-ui/react-components 可以商用吗？ @brightlayer-ui/react-components 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。 ### @brightlayer-ui/react-components 的下载量有多少？ 根据 npm 官方下载统计，@brightlayer-ui/react-components 在 2026/10/09 – 2026/11/07 这 30 天内被下载 18,261 次，日均约 609 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @brightlayer-ui/react-components 还在维护吗？ 最新版本 8\.0\.6 发布于 2026/11/02（6 天前）；至今共发布 43 个版本，其中过去 12 个月发布了 10 个；首次发布于 2021/11/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。