在开发前端应用时，使用组件库可以提高开发效率和用户体验。Microsoft 的 Fabric UI 是一个非常优秀的组件库，在 React 中使用时可以通过 gatsby-plugin-fabric-ui 这个 npm 包来快速集成。
安装
安装 gatsby-plugin-fabric-ui 可以通过 npm 命令：
npm install gatsby-plugin-fabric-ui
配置
在 gatsby-config.js 中添加该插件：
-- -------------------- ---- -------
-- ----------------
-------------- - -
-------- -
-
-------- --------------------------
-------- -
-------------- ---- -- -------
--
--
--
-启用 useCustomizer 选项，可以自定义 Fabric UI 的配置。可以在 官方文档 上了解更多自定义配置。
使用
在组件中使用 Fabric UI 的组件可以直接引入：
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
function MyComponent() {
return (
<PrimaryButton>点击我</PrimaryButton>
)
}示例代码
下面是一个使用 gatsby-plugin-fabric-ui 插件的完整示例代码：
-- -------------------- ---- -------
-- ------------------
------ ----- ---- -------
------ - ------------- - ---- -----------------------------------
------ ------ ---- ----------------------
------ ------- -------- ------ -
------ -
--------
-------- ------ -- --------
----------------------------------
---------
-
--- -------------------- ---- -------
-- ----------------
-------------- - -
-------- -
-
-------- --------------------------
-------- -
-------------- ----
--
--
--
-总结
使用 gatsby-plugin-fabric-ui 可以非常方便地在 Gatsby 中集成 Fabric UI 组件库。同时，自定义配置可以更好地满足自己的需求。希望这篇文章能对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e7d9381d61a3540b5b