# @bigbluebutton/bbb-ui-components-react 中文文档 规范地址：https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/ 版本：0\.10\.0 npm 元数据更新时间：2026-10-26T22:05:33.974Z 中文译文更新时间：2026-11-08T02:37:59.041Z 软件包许可：LGPL-3\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bigbluebutton/bbb-ui-components-react 原文对照：https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/?lang=original 项目主页：https://github.com/bigbluebutton/bbb-ui-components-react#readme 源码仓库：https://github.com/bigbluebutton/bbb-ui-components-react ## 关键信息（来自 npm 元数据） - 包体积（解压后）：471 kB，206 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：3 个 - peer 依赖：react ^18\.2\.0，react-dom ^18\.2\.0，prop-types ^15\.8\.1，react-icons ^5\.5\.0，react-modal \>=3\.16\.1，@mui/material ^6\.4\.9 \|\| ^7\.0\.0，@emotion/react ^11\.13\.0，@emotion/styled ^11\.13\.0，styled-components \>=5\.3\.0，@mui/icons-material ^6\.4\.9 \|\| ^7\.0\.0 - 首次发布：2026-07-21T17:44:18.114Z - 最新版本发布：2026-10-26T22:05:33.587Z - 近 30 天下载量：2010（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：6（近 12 个月 6 个） ## 中文简介 此寄存器包含从主库提取的可重复使用的 React 组件库 [**大蓝色按钮( BBB)**](https://github.com/bigbluebutton/bigbluebutton) 项目。 这些组件提供了可被再利用的一致和自定义的界面 ## 安装 ```sh npm install @bigbluebutton/bbb-ui-components-react ``` 也可以使用：`pnpm add @bigbluebutton/bbb-ui-components-react`、`yarn add @bigbluebutton/bbb-ui-components-react`、`bun add @bigbluebutton/bbb-ui-components-react` ## README # BBB UI 组件反应 此寄存器包含从主库提取的可重复使用的 React 组件库 [**大蓝色按钮( BBB)**](https://github.com/bigbluebutton/bigbluebutton) 项目。 这些组件提供了一个一致而可自定义的界面,可以在其他项目中被再用,使得它们能够轻松地采用BBB视觉特性. ## 可用组件 以下是此库中可用的组件列表. 每个部分都有自己的详细文件,并附有使用实例和完整的道具清单. - [溴化二苯醚](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Accordion/README.md) - [BBB-Avatar (英语)](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Avatar/README.md) - [BB 按钮](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Button/README.md) - [BBB 检查框](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Checkbox/README.md) - [BBB 潜水器](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Divider/README.md) - [BBHint 语句](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Hint/README.md) - [BBB 投入](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Input/README.md) - [BBB 摩多尔](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Modal//README.md) - [BBBNavigation 语录](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Navigation/README.md) - [BBScroll地区](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/ScrollArea/README.md) - [BBS搜索器](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Search/README.md) - [BBB 选择](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Select/README.md) - [BBB 滑轮](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Slider/README.md) - [BBB斯平纳](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Spinner//README.md) - [BBT文本输出](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/TextAreaInput/README.md) - [BBText 输出](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/TextInput/README.md) - [BBB 趋势](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Toast/README.md) - [BBB 切换](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Toggle/README.md) - [BBB 类型](https://npmcn.com/package/%40bigbluebutton/bbb-ui-components-react/src/components/Typography/README.md) ## 同伴依赖关系 此库需要在您的工程中安装以下对等依赖 : ``` react ^18.2.0 react-dom ^18.2.0 styled-components >=5.3.0 react-modal >=3.16.1 @emotion/react ^11.13.0 @emotion/styled ^11.13.0 @mui/material ^6.4.9 || ^7.0.0 @mui/icons-material ^6.4.9 || ^7.0.0 prop-types ^15.8.1 react-icons ^5.5.0 ``` 确保安装这些依赖性以避免运行时间出错,并确保兼容性. 您可以安装以下命令: ```bash npm install react react-dom styled-components react-modal @emotion/react @emotion/styled @mui/material @mui/icons-material prop-types react-icons ``` **说明**数字 : `@tippyjs/react` 财务报告和审定财务报表 `tippy.js` (被"工具通"内部使用) 飞船作为这个库的常有依赖,所以它们被自动安装——不需要自己添加. ## 用 CSS 变量自定义颜色 此库支持使用 CSS 自定义属性(可变) 的压倒性组件颜色 。 您可以在项目的全球 CSS 或样式表中定义这些变量,以便在不修改库代码的情况下自定义组件的外观 。 这对主题和保持与您的应用设计系统的一致性特别有用. 要使用此特性: 1. 定义您工程根样式中的 CSS 变量( 例如在全局 CSS 文件或通过样式组件) `createGlobalStyle`) (中文(简体) ). 2. 如果这些变量设置在 `:root` 元素或母容器. **说明**: 这些变量是可选的。 如果不定义, 组件将返回到默认的样式组件主题值, 这些值来自工程的 `src/stylesheets/palette.ts` 文档. ### 可用的 CSS 变量 下表列出所支持的CSS变量,用于色彩压倒,取自 `src/stylesheets/palette.ts`. 每个变量对应组件中使用的特定颜色方面(如中性,品牌,语义等). "Maps to BBB Core Variable"一栏表示该变量是否与标准的BBB核心颜色对齐(基于文件的评论). “ 默认值” 一栏显示如果变量未设定时使用的倒置颜色 . | 变量名称 | BBB 核心变量地图 | 默认值 | | --- | --- | --- | | `--color-neutral-2` | 没有 | #717C91 (英语) | | `--color-neutral-3` | 没有 | #B0BDC9 (中文(简体) ) | | `--color-neutral-4` | 没有 | #DCE4EC (中文(简体) ) | | `--color-neutral-white` | 没有 | {\\FN方正黑体简体\\FS18\\B1\\BORD1\\SHAD1\\3CH2F2F2F}弗朗索瓦·德克萨斯 | | `--color-light-gray` | 没有 | #F4F6FA (英语) | | `--color-gray` | 没有 | #4E5A66号 | | `--color-dark-gray` | 没有 | #393C48 (英语) | | `--color-brand-1` | 没有 | #0F70D7 (英语) | | `--color-brand-2` | 没有 | #0F70D7 (英语) | | `--color-brand-3` | 没有 | #0F70D7 (英语) | | `--color-brand-light` | 对(`--color-blue-aux`(中文(简体) ) | #E5EFFB (英语) | | `--color-brand-aux` | 对(`--color-brand-aux`(中文(简体) ) | #E5EFFB (英语) | | `--color-success` | 没有 | #2DD36F (英语) | | `--color-warning` | 没有 | #F59240 (英语) | | `--color-error` | 对(`--color-danger`(中文(简体) ) | #DF2721 (英语) | | `--color-error-dark` | 对(`--color-danger-dark`(中文(简体) ) | #AE1010 (英语) | | `--color-background-white` | 没有 | {\\FN方正黑体简体\\FS18\\B1\\BORD1\\SHAD1\\3CH2F2F2F}弗朗索瓦·德克萨斯 | | `--color-background-light` | 没有 | #F4F6FA (英语) | | `--color-background-blue` | 没有 | #E5EFFB (英语) | | `--color-border-default` | 没有 | #B0BDC9 (中文(简体) ) | | `--color-border-selected` | 没有 | #0F70D7 (英语) | | `--color-border-error` | 没有 | #DF2721 (英语) | | `--color-border-default` | 对(`--default-border`(中文(简体) ) | #B0BDC9 (中文(简体) ) | | `--color-text-default` | 没有 | #393C48 (英语) | | `--color-text-light` | 没有 | #717C91 (英语) | | `--color-icon-default` | 没有 | #717C91 (英语) | | `--color-icon-blue` | 没有 | #0F70D7 (英语) | | `--color-icon-white` | 没有 | {\\FN方正黑体简体\\FS18\\B1\\BORD1\\SHAD1\\3CH2F2F2F}弗朗索瓦·德克萨斯 | | `--color-hover-dark` | 没有 | #0C57A7 (英语) | | `--color-hover-light` | 没有 | #D4E5FA (英语) | | `--color-hover-neutral` | 没有 | #DCE4EC (中文(简体) ) | | `--color-border-focus-ring` | 没有 | rgba(29、101、212、0.15) | | `--color-icon-default-dark` | 没有 | rgba(255、255、255、0.35) | | `--color-overlay` | 没有 | rgba( 0, 0, 0, 0, 0. 75) | | `--color-shadow-default` | 没有 | rgb( 0 35 11 / 20%) | | `--color-user-you` | 没有 | #19237C (英语) | **示例使用**数字 : ```css :root { --color-primary: #ff5733; /* Override primary brand color to a custom orange */ --color-text-default: #333333; /* Darker text for better contrast */ } ``` 如果您需要覆盖特定组件的颜色或添加新的变量,请参考组件的 `styles.ts` 用于执行细节. ### 在 JS 中导入颜色托肯 除了CSS变量之外,每个组件内部使用的同一种颜色符号也是 导出为嵌入 `colors` 对象,直接用于JS/TS(如: 样式组件 : ```jsx // From the package root import { colors } from '@bigbluebutton/bbb-ui-components-react'; // Or from the dedicated, tree-shakeable subpath import { colors } from '@bigbluebutton/bbb-ui-components-react/colors'; const StyledDiv = styled.div` color: ${colors.text.default}; background: ${colors.background.white}; `; ``` `colors` 分类方式与上表相同: `neutral`, (中文(简体) ), `brand`, (中文(简体) ), `semantic`, (中文(简体) ), `background`, (中文(简体) ), `border`, (中文(简体) ), `text`, (中文(简体) ), `icon`, (中文(简体) ), `hover`, (中文(简体) ), `overlay`, (中文(简体) ), `shadow`, (中文(简体) ), `user`。 。 。 . ## 安装 您可以直接从 npm 安装库 : ```bash npm install @bigbluebutton/bbb-ui-components-react ``` ## 地方发展 如果您想要在当地建立图书馆或贡献: ### 构建捆绑 ``` nvm use npm install npm run build ``` ### 使用 npm 链接 在本地开发和测试时 `npm link`,您可能需要调整您的 Webpack 配置,以确保与 `styled-components` 财务报告和审定财务报表 `react`,这些实例处理不当。 在使用此库的项目中添加以下别名配置 : ```json resolve: { alias: { 'styled-components': path.resolve('./node_modules/styled-components'), react: path.resolve('./node_modules/react'), 'react-dom': path.resolve('./node_modules/react-dom'), }, } ``` ## 常见问题 ### @bigbluebutton/bbb-ui-components-react 是什么？ 此寄存器包含从主库提取的可重复使用的 React 组件库 大蓝色按钮\( BBB\) 项目。 这些组件提供了可被再利用的一致和自定义的界面 ### 如何安装 @bigbluebutton/bbb-ui-components-react？ 在项目目录运行 npm install @bigbluebutton/bbb-ui-components-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.2\.0）、react-dom（^18\.2\.0）、prop-types（^15\.8\.1）、react-icons（^5\.5\.0）、react-modal（\>=3\.16\.1）、@mui/material（^6\.4\.9 \|\| ^7\.0\.0）、@emotion/react（^11\.13\.0）、@emotion/styled（^11\.13\.0）、styled-components（\>=5\.3\.0）、@mui/icons-material（^6\.4\.9 \|\| ^7\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bigbluebutton/bbb-ui-components-react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bigbluebutton/bbb-ui-components-react 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @bigbluebutton/bbb-ui-components-react 可以商用吗？ @bigbluebutton/bbb-ui-components-react 使用 LGPL-3\.0 许可。弱 Copyleft：作为库被调用时通常不要求开源你自己的代码，但修改库本身需以 LGPL 开源；前端打包合并后的适用边界存在不同理解。以上为概括，不构成法律意见，请以许可原文为准。 ### @bigbluebutton/bbb-ui-components-react 的下载量有多少？ 根据 npm 官方下载统计，@bigbluebutton/bbb-ui-components-react 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,010 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bigbluebutton/bbb-ui-components-react 还在维护吗？ 最新版本 0\.10\.0 发布于 2026/10/27（12 天前）；至今共发布 6 个版本，其中过去 12 个月发布了 6 个；首次发布于 2026/07/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。