fluentui

当需要在React项目中复用微软Fluent设计体系的UI组件时，Fluent UI React Components提供了从@fluentui/react和@fluentui/react-northstar两套库合并而来的官方组件集与工具，可直接用于生产环境。

它解决了什么问题

微软内部长期并行维护两套React组件库（@fluentui/react和@fluentui/react-northstar），导致团队选型分裂、维护成本高。Fluent UI React Components项目将二者收敛为一套统一的组件和工具集，开发者无需再纠结该用哪套库，也避免了未来因库分裂产生的迁移成本。

• 库合并：统一了@fluentui/react（原Office UI Fabric）和@fluentui/react-northstar（原Teams UI）两套代码基
• 生产就绪：组件已用于Microsoft 365、Teams、Azure等微软核心产品

适合谁用

主要面向需要开发符合微软Fluent Design语言的企业级React应用的开发者，尤其是微软生态内的ISV、Office/Teams插件开发者，以及希望复用微软内部组件规范的前端团队。

• 微软生态开发者：构建Teams应用、Office Add-in、SharePoint Web Part时可直接引用
• 企业前端团队：需要统一设计语言的大型后台管理系统
• React技术栈用户：组件基于React实现，支持Hooks和现代React模式

怎么上手

通过npm安装@fluentui/react-components包即可使用。项目提供Storybook作为交互式文档，但官方提醒Storybook Manager UI的自定义样式（如非thenable样式）写法脆弱，升级Storybook版本时需注意选择器可能被覆盖。

• 安装命令：npm install @fluentui/react-components
• 组件导入：import { Button, Dialog } from '@fluentui/react-components'
• 样式定制：支持CSS-in-JS方案（Griffel），也可通过className覆盖
• Storybook地址：https://react.fluentui.dev/ 内嵌Storybook实例

注意事项

文档中明确标注Storybook Manager UI的自定义样式存在脆弱性——使用非thenable样式时，选择器可能在Storybook版本升级后失效，建议避免深度定制Manager UI。另外，项目仍处于合并过渡期，部分组件可能同时保留新旧两套API签名。

• Storybook UI样式风险：官方称此为“brittle way”，不保证跨版本兼容
• 组件API差异：合并过程中部分组件（如Button）同时支持旧版@fluentui/react和@fluentui/react-northstar的props写法
• 版本号：当前稳定版为9.x系列，与旧版8.x（@fluentui/react）不直接兼容

常见问题

Q1：Fluent UI React Components和旧的@fluentui/react是什么关系？

A1：Fluent UI React Components是@fluentui/react（原Office UI Fabric）和@fluentui/react-northstar（原Teams UI）的合并产物，新项目应直接使用@fluentui/react-components包。旧版@fluentui/react（8.x）仍可继续使用但不再获得新功能，最终将被替换。

Q2：Fluent UI React Components的Storybook有什么已知问题？

A2：官方文档指出Storybook Manager UI的自定义非thenable样式（如直接写CSS选择器覆盖）是脆弱的，这些选择器可能在Storybook版本升级时发生变化，导致自定义样式失效。建议尽量使用Storybook官方支持的theme API进行定制。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。