什么是 glamor-styled
glamor-styled 是一个基于 React 组件库的 npm 包，其主要作用是让开发者可以通过定义 CSS 样式来快速构建复杂的用户界面。它的最大优势在于可以让你通过 JavaScript 和 ES6 的语法来定义 CSS 样式并且与组件深度绑定，有效的提高组件的可复用性和可维护性。
如何安装 glamor-styled
可以通过 npm 安装 glamor-styled，只需要在项目的根目录下打开终端并输入以下命令即可安装：
npm install glamor-styled --save
如何使用 glamor-styled
基本用法
在需要使用 glamor-styled 的组件中，可以通过引入 StyleSheet 的方式来定义样式：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
----- ------ - -------------------
---------- -
---------------- ------
------ --------
-------- -------
------------- ------
--
---
----- ----------- - -- -- -
---- ----------------------
------ ------ -------
------
--我们可以发现，通过引入 StyleSheet 后，就可以使用 JavaScript 和 ES6 的语法来定义 CSS 样式了，只需要通过传递一个样式对象来给组件添加样式。
可以通过 glam 属性来全部嵌套到指定的组件上：
-- -------------------- ---- -------
------ - ---- - ---- ----------------
----- ------ - ------
---------- -
---------------- ------
------ --------
-------- -------
------------- ------
--
---
----- ----------- - -- -- -
---- ------------------------
------ ------ -------
------
--组件嵌套
一般来说，我们需要在组件中使用子组件，那么如何让子组件使用父组件的样式呢？这就需要用到组件嵌套的方法。
首先，我们需要定义一个组件，包含两个子组件并且设定样式：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
----- ------ - -------------------
------------- -
---------------- ------
------ --------
-------- -------
------------- ------
--
------------- -
---------------- -------
------ --------
-------- -------
------------- ------
---------- ------
--
---
----- --------------- - -- -- -
-----
---- -------------------------
------ ---------
--------------- --
------
------
--
----- -------------- - -- -- -
---- -------------------------
----- ---------
------
--我们可以看到，通过在父组件中定义样式，并使用 ... 来将所有样式传递给子组件，就可以让子组件沿用父组件的样式了。
样式继承
有时候我们会需要在组件中复用已经定义好的其他样式，同样的样式代码可以减少工作量，并且能够使样式更加一致。这就需要用到 glamor-styled 的样式继承方法。
例如我们定义了一个 container 样式，我们要让 container2 沿用 container，我们可以这样定义：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
----- ------ - -------------------
---------- -
---------------- ------
------ --------
-------- -------
------------- ------
--------- -------
----------- -------
--
----------- -
------- ------------
---------------- -------
--
---
----- ----------- - -- -- -
---- ----------------------
---- -----------------------
------ ------ -------
------
------
--我们可以通过 extend 属性让 container2 继承 container 中的所有样式，然后再覆盖自己的样式。通过这种方式，我们可以在自定义样式时极大提高代码复用性。
总结
glamor-styled 是一个非常棒的 npm 包，让我们可以使用 JavaScript 和 ES6 的语法来定义 CSS 样式，进而提高了组件的可复用性和可维护性。在实际开发中，我们可以通过嵌套子组件和样式继承的方法来提高开发效率和代码可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dac45