简介
glamorous-jsxstyle 是一个基于 React 的 UI 组件库，它使用了 CSS-in-JS 的方式来实现样式，让样式和组件完全解耦，减少了样式表冲突和命名空间问题。
安装
使用 npm 安装：
npm install glamorous-jsxstyle
基本使用
在组件中引入 glamorous-jsxstyle，使用 glamor 来定义样式。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------------------
----- ------ - -----------------
-
--------- -------
--
-- ------- -- -- --
---------------- ------- - ----- - --------
------ ------- - ------- - ------
---
--
------ ------- -------在上例中，我们定义了一个 Button 组件，它有两个样式对象，第一个样式对象是一个普通的对象，表示按钮的字体大小；第二个样式对象是一个函数，它根据组件的 props 来返回一个动态的样式对象，表示按钮的背景色和文字颜色。
使用样式，只需要在组件中传入对应的 props，样式会自动应用。
<Button primary>点击我</Button>
高级用法
复用样式
使用 glamorous 函数，可以将样式从组件中抽离出来，形成独立的样式组件。这样可以提高代码的复用性。
-- -------------------- ---- ------- ------ --------- ---- --------------------- ----- ----------- - - --------- ------- -- ----- ------------------ - -- ------- -- -- -- ---------------- ------- - ----- - -------- ------ ------- - ------- - ------ --- ----- ----------- - ----------------------------- -------------------- ----- ------ - ----- -- - ------------ ---------------------------- -- ------ ------- -------
在上例中，我们将样式从 Button 组件中抽离出来，定义为一个样式组件 ButtonStyle。Button 组件只需要继承 ButtonStyle 组件的 props 和样式，即可实现样式的复用。
混合样式
使用 glamor.compose 函数，可以将多个样式组合成一个样式对象。这样可以实现样式的继承和复用。
-- -------------------- ---- ------- ------ - ------- - ---- --------- ------ --------- ---- --------------------- ----- --------------- - - --------- ------- -- ----- ------------------ - -- ------- -- -- -- ---------------- ------- - ----- - -------- ------ ------- - ------- - ------ --- ----- ----------- - ----------------------------------------- --------------------- ----- ------ - ----- -- - ------------ ---------------------------- -- ------ ------- -------
在上例中，我们使用了 glamor.compose 函数，将 baseButtonStyle 和 primaryButtonStyle 组合成一个样式对象，作为按钮的样式。
可以使用 glamor.compose 函数，将多个样式组合成一个样式对象，然后应用到多个组件中，实现样式的混合和复用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586a81e8991b448d5a1b