简介
在前端开发过程中，我们经常需要使用一些 UI 组件来搭建网页。但是每次手动去搭建 UI 组件是非常费时费力的，于是社区就出现了一些优秀的 UI 库。其中 Bootstrap 是最受欢迎的 UI 库之一，但是它只提供了基本的组件，并且样式比较固定，不太方便扩展。而 Ant Design、Material UI 等 UI 库就提供了丰富的组件，并且支持自定义主题。但是这些 UI 库的缺点是不太灵活，有些组件用起来比较麻烦，需求只是几个简单的组件，需要整个 UI 库的体积太大。
于是 Civil 研发的 @joincivil/components 就出现了，它是一个简单易用，轻量级的 React UI 组件库，只提供了基本的组件功能，体积比较小， 同时又支持自定义主题，非常适合需求简单，想要快速开发项目的开发者使用。
安装
在使用 @joincivil/components 之前，需要先安装 Node.js 和 Npm，可以在 Node.js 官网上下载安装 Node.js，安装时自带 Npm。
然后在项目中使用 Npm 安装 @joincivil/components：
npm install @joincivil/components --save
使用
导入组件
可以使用以下方式导入 @joincivil/components 中的组件：
import { Button, Input } from '@joincivil/components';
使用组件
使用导入的组件非常简单：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- ----- - ---- ------------------------
----------------
-----
---------------------
------ ------------------- --
-------
-------------------------------
--自定义主题
@joincivil/components 的主题是使用 Styled Components 实现的。
如果需要自定义主题，可以在项目中创建一个主题文件（例如：theme.js）：
-- -------------------- ---- -------
------ - ----------------- - ---- --------------------
------ - ------------- - ---- ------------------------
------ ----- ----- - -
------- -
---------------- ----------
------------ ----------
------ -------
--------------------- ----------
----------------- ----------
--
------ -
---------------- -------
------------ ----------
------------- ------
------ -------- -- -- -------
----------------- ----------
--
--
------ ----- ----------- - ------------------
---- -
------- --
------------ ----- ------ -----------
---
----- --- - -- -- -
-------------- --------------
------------ --
-----
---------------------
------ ------------------- --
------
----------------
--
------ ------- ----然后在项目中引入 App.js 即可：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));总结
@joincivil/components 是一个简单易用，轻量级的 React UI 组件库，只提供了基本的组件功能，体积比较小，同时又支持自定义主题，非常适合需求简单，想要快速开发项目的开发者使用。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/joincivil-components