什么是 glamorous？
glamorous 是一个 React 组件库，它提供了一种方便的方式来创建可重用的样式化组件。glamorous 可以让你在组件级别上定义样式，而不是在全局 CSS 中重复定义这些样式。
安装 glamorous
使用 npm 安装 glamorous：
npm install glamorous
创建样式化组件
通过 glamorous 创建组件非常简单。首先，导入 glamorous 和 React：
import glamorous from 'glamorous'; import React from 'react';
然后，你可以使用 glamorous 函数创建组件，并为其指定样式：
-- -------------------- ---- -------
----- ------ - ------------------
--------- -------
-------- ----- ------
---------------- ----------
------ -------
------------- ------
------- -------
------- ----------
---------- -
---------------- ---------
-
---在上面的代码中，我们使用 glamorous.button 函数来创建一个按钮组件，并为其设置了一些样式。注意，在样式对象中，CSS 属性名需要使用驼峰式命名法（例如，backgroundColor 而不是 background-color）。
现在我们已经定义了一个样式化的按钮组件，接下来就可以在应用程序中使用它了：
function App() {
return (
<div>
<Button>Click me!</Button>
</div>
);
}使用属性传递样式
有时你可能需要根据组件的 props 动态地修改其样式。为此，glamorous 提供了一种便捷的方式来将样式传递给组件。
首先，创建一个接收 props 的函数：
-- -------------------- ---- -------
-------- ---------------------- -
----- ----- - ------------- - --------- - ----------
------ -
--------- -------
-------- ----- ------
---------------- ------
------ -------
------------- ------
------- -------
------- ----------
---------- -
---------------- ------------- - --------- - ---------
-
--
-然后，使用 glamorous 函数并将 getButtonStyles 函数作为参数传递：
const Button = glamorous.button(getButtonStyles);
现在，我们可以通过将 primary 属性设置为 true 来指定按钮的主题颜色：
<Button primary>Click me!</Button>
总结
glamorous 是一个令人兴奋的工具，它可以让你更轻松地创建可重用的样式化组件。在本文中，我们学习了如何安装 glamorous、如何创建样式化组件以及如何使用属性传递样式。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33737