在现代前端开发中，CSS 是一个必不可少的组成部分。为了更加便捷地管理和使用 CSS，我们可以使用 @luke-john/glamorous 这个 npm 包。
@luke-john/glamorous 是一个构建于 React 上的样式系统，通过它，我们可以使用 JavaScript 来编写样式。这个库的意义在于可以使用框架化的方式来组织复杂的样式，并且可以直观的组合和修改。
安装
在使用 @luke-john/glamorous 之前，我们需要先安装它。可以使用 npm 或 yarn 来进行安装。
npm install --save @luke-john/glamorous
yarn add @luke-john/glamorous
基本使用
我们可以先看一个简单的例子，在 React 中使用 @luke-john/glamorous 来添加样式。
-- -------------------- ---- -------
------ --------- ---- ----------------------
----- ------ - ------------------
-------- -------
---------------- ----------
------ -------
--------- -------
------------- ------
---------- -
---------------- ----------
-
--
-------- ----- -
------ -
----------------------
--
-通过 glamorous.button 函数生成一个 Button 组件，并提供了一些 CSS 样式规则。在使用的时候，我们可以像使用普通组件一样来使用它：
<Button>Login</Button>
动态样式
在实际开发中，很多情况下我们需要根据不同的条件来展现不同的样式。在 @luke-john/glamorous 中，我们可以使用函数式的方式来进行处理。
-- -------------------- ---- -------
----- ------ - ------------------- -- --
------------- ------
------ -----------
------- -----------
---
-------- ----- -
------ -
--
------- ----------- ------------------------------------ --
------- ------------ ------------------------------------ --
---
--
-我们可以传入一个函数，这个函数会返回一个包含样式规则的对象。这样我们就可以根据 props 来动态的生成样式。
-- -------------------- ---- -------
----- ------ - ------------------- -- --
------------- ------
------ -----------
------- -----------
---
-------- ----- -
------ -
--
------- ----------- ------------------------------------ --
------- ------------ ------------------------------------ --
---
--
-样式复用
在实际的开发中，很多情况下会有一些样式会被反复的使用，如果每次都写一遍，代码的可读性和可维护性都会降低。在 @luke-john/glamorous 中，我们也可以很方便的实现样式的复用。
-- -------------------- ---- -------
----- --------------- - -
------ -------
-------- -------
--------- -------
---------------- ----------
------- ---- ----- ------
------------- ------
---------- -
-------- -------
------------ ---------
-
-
----- ----- - --------------------------------
----- -------- - --------------------
-------------------
------- --------
--我们将重复使用的样式定义到一个对象中，然后在需要使用的地方，通过 ... 来展开对象即可。这样我们在使用的时候，只需要传入其他变化的样式即可。
function App() {
return (
<>
<Input placeholder='Username' />
<Textarea placeholder='Description' />
</>
);
}高阶组件
在 @luke-john/glamorous 中，我们可以使用 glamorous 将一个组件转换成另一个具有样式参数的高阶组件。
例如，我们要将 Component 转换成具有样式的高阶组件，可以使用 glamorous(Component)：
-- -------------------- ---- ------- ------ --------- ---- ---------------------- -------- ------- -- --------- -- - ------ ---- ---------------------------- ------------ - ----- ------------- - -------------------- ------ ------ ---------------- ------- -- -------- ----- - ------ -------------- -- -
总结
通过本文，我们了解了 @luke-john/glamorous 的基本使用方法。这个库的优点在于可以使用 JavaScript 来编写样式，更加便捷的管理和组合样式，使得前端开发更加简单高效。
当然还有许多复杂的用法可以去深入了解和使用，欢迎大家去官网查看更多文档和示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb081e8991b448dc453