前言
在前端开发中，我们经常需要使用各种 UI 库来快速搭建页面，提高开发效率和用户体验。本文将介绍一款基于 React 的 UI 库 @harbor/ui，该库提供了丰富的组件和样式，同时支持主题定制。
安装
使用 npm 安装 @harbor/ui：
npm install @harbor/ui
使用
引入组件
在项目中要使用 @harbor/ui 的组件，需要在文件头部引入组件库：
import { Button, Input } from '@harbor/ui';使用组件
引入组件后，就可以在需要的地方使用组件了，例如：
<Button variant="primary" onClick={() => alert('Hello World')}>Click Me!</Button>
<Input type="text" placeholder="Please input something" />主题定制
@harbor/ui 支持主题定制，你可以根据自己的需求修改组件默认颜色，字体等等。首先，在项目中新建一个名为 theme.js 的文件：
-- -------------------- ---- -------
-- --------
------ - ----------- - ---- -------------
------ ----- ------- - -------------
------- -
-------- ----------
---------- ----------
--
----------- -
----------- ------- ------------
--
---然后在项目中引入 myTheme，并传递给 ThemeProvider 包裹的组件：
-- -------------------- ---- -------
------ - ------------- - ---- --------------------
------ - ------- - ---- ----------
-------- ----- -
------ -
-------------- ----------------
--- ---- ---------- ---
----------------
--
-示例
下面我们来实现一个简单的计数器，使用 Button 和 Input 组件：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ------- ----- - ---- -------------
------ ------- -------- --------- -
----- ------- --------- - ------------
-------- ---------------- -
-------------- - ---
-
-------- ---------------- -
-------------- - ---
-
------ -
--
------ ------------- ------------- -------- --
------- ----------------- -----------------------------------
------- ---------------- -----------------------------------
---
--
-结论
本文介绍了如何使用 @harbor/ui，以及如何实现主题定制。相信大家已经体验到了该库提供的便捷和功能，希望可以帮助到大家在前端开发中提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b36694