介绍
emotional 是一个通过编写 JavaScript 和标记模板字面量来进行样式化的库。它基于 CSS-in-JS 的思想，让我们在编写组件时，同时也能够管理我们的样式。emotional 支持动态样式和类似于 SCSS 的嵌套。除此之外，它还具有优雅的语法和简单的 API，是一个值得学习的前端库。
安装
可以使用 npm 来安装 emotional，其命令如下：
npm install emotional
使用
简单例子
下面的代码演示了如何将 emotional 添加到应用中，并用它来样式化页面元素。
-- -------------------- ---- -------
------ ------ ---- -----------
----- ----- - ----------
---------- ----
----------- -------
------ ------- -- ------------- - --------------- - --------
-
----- --- - -- -- -
------ -
------ --------
------ ------
--------
-
-
-------------------- --- --------------------------------上面例子中，我们使用 styled 方法创建了一个名为 Title 的组件，并应用了一些 CSS 样式。接着在 App 组件中使用了这个 Title 组件，并通过 primary 属性向组件传递了一些自定义样式的信息，这样我们得到了在不同场景下的不同配色的组件。
高级例子
以下是更复杂的示例代码，用于了解在 emotional 中如何使用嵌套和动态属性。
-- -------------------- ---- -------
------ ------ ---- -----------
----- ------ - --------------
-------- ----- ----
------- ------
----------------- ------- -- ----------- -- --------------
------ ------- -- ----------- - ------- - -----------------
-------------- ----
------- ------- -- ------------- - ---- ----- -------------- - --------
------- -
----------------- ------- -- ----------- - --------- - -----------------
------ ------
-
----- -
---------- ------
----------- -------
-
-
----- --- - -- -- -
------ -
--
--------------- ---------------
------- -------------- --------
------- ----- --------
----- -----
---------
---
-
-
-------------------- --- --------------------------------上面例子中，我们创建了一个 Button 组件，并应用了一些 CSS 样式，以及嵌套了一个 small 标签。在主题色已经通过 color 属性被定义的 Button 组件上，当 hover 事件触发时变量的颜色和字体色也有所改变。
总结
通过阅读本文，您应该能够理解如何在前端开发中使用 npm 包 emotional。我们探讨了 emotional 的特征、安装、简单使用以及嵌套和动态属性的高级使用。因此，它被推荐为值得学习的前端库之一。你可以通过这篇文章内的代码片段快速上手 emotional。如果您在使用 emotional 中遇到了其他问题，请不要犹豫，善用人才拓展知识，从各种官方文档、社区等渠道寻找帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1fa563576b7b1ecd7b