介绍
Glamorous 是一个 React 组件库，能够帮助开发者快速创建可定制化的 React 组件。Glamorous-stylus 则是一个让 Glamorous 支持 stylus 语言的 npm 包，能够更加便捷地编写样式。
安装
可以通过 npm 安装该包：
npm install glamorous-stylus
使用
基础用法
- 导入 glamorous：
import glamorous from 'glamorous';
- 导入 glamorous-stylus：
import { ThemeProvider } from 'glamorous';
import GlamorousStylus from 'glamorous-stylus';
import 'glamorous-stylus/dist/index.css';
const StylusProvider = GlamorousStylus(ThemeProvider);这里会生成一个包装过的 ThemeProvider，可以在它的上下文环境中使用 stylus 样式代码。
- 使用生成的 StylusProvider：
-- -------------------- ---- -------
----- ----------- - --------------
---
-- ----- -- -- --
---------------- --------------------------
------ --------
------- --------
--
--
------ ------- -------- ------- -
------ -
----------------
------------ --
-----------------
--
-高级用法
我们可以使用 glamorous 的 withProps 方法来创建可定制化的 Stylistic Component:
-- -------------------- ---- -------
------ --------- ---- ------------
------ - --------- - ---- ------------
----- --- - --- -- - - -- - ------- - -------
----- ---- - --------------
---------------
----------- ------------
---------- ---------
--------- -------
---------------- ---------
------ --------
------- -------
----------- -------
------------- ------
---------- -- --- --- ------- -- -- -------
--
--
----- --------------- - ---------------
-------- -------
-------------- ---------
------- -------
-- ------- -
------------ -------------
----------- -------
------------- ------
-------------- ------
--------- -------
------ -------
--
---
----- ---------------- - ---------------------------
------ -----
--------- -- -- ---
------------ ------- -- -
-- -------- ------ ---
------ ------------------------------------------------------
--
------------- -- -- -
----- ------- - --- -------
---------------------------
----------------------
------ --------
--
----- -- - -- - -----
----------------
------ ------- -------- ----- -
------ -
----------------
-----
-----------------
------------- - -------------
----------------- --
------------------
------
-----------------
--
-结语
Glamorous-stylus 的使用非常简单易懂，它可以帮助我们更加方便地编写样式，从而加速前端开发的效率。如果您有需要，不妨尝试一下！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d881e8991b448df1a9