什么是 pinky？
Pinky 是一个将 CSS 样式转换为 JS 对象的工具库，允许你在 React 和 Vue 这样的前端框架中使用 JavaScript 代码动态生成 CSS 样式。通过这种方式，可以更加灵活地控制样式的生成过程。
安装 pinky
我们可以通过 npm 安装 pinky：
npm install pinky
或者，你也可以使用 yarn：
yarn add pinky
使用 pinky
使用 pinky 是十分简单的，我们只需要创建一个 JavaScript 对象，然后将其传递给 pinky 的 createStyles 函数即可。该函数会返回一个 CSS 样式字符串。
以下是一个示例：
-- -------------------- ---- -------
------ - ------------ - ---- --------
----- ------ - --------------
---------- -
---------------- ------
-------- -------
--
----- -
------ --------
--------- -------
----------- -------
--
---
--------------------
-- ------------- ----------------------------------------- ----------------------------------------------运行以上示例代码，我们可以得到一个包含两个样式的 CSS 样式字符串。
你可以在你的 React 或 Vue 组件中将其直接使用。
动态生成样式
除了可以在编译期间生成样式外，pinky 还允许我们在运行时动态生成样式。我们可以向 createStyles 函数中传递一个回调函数，该函数会在生成样式时执行，并返回一个 JavaScript 对象。
以下是一个示例：
-- -------------------- ---- -------
------ - ------------ - ---- -------
----- ------ - --------------- -- --
---------- -
---------------- ------
-------- -------
--
----- -
------ --------
--------- -------
----------- -------
--
------------ ----- -- --
------ ----------- -- --------
--------- -------
---
----
--------------------
-- ------------- ----------------------------------------- ---------------------------------------------------------- -----------------------------在这个示例中，我们定义了一个名为 dynamicText 的动态样式。我们将该样式定义的 JavaScript 对象里的属性的值设置为一个函数，返回的结果是根据传入的 props 来自动生成样式值。
在实际使用中，我们可以动态地设定传入的 props 属性，然后动态生成样式。
总结
使用 pinky 可以更灵活地控制样式生成过程，将样式从静态的 CSS 文件中解放出来，使其可以更具动态性。通过本文的学习，我们了解了 pinky 的基本使用方法，以及如何动态生成样式。希望这篇文章可以对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65278