简介
Emotions 是一个流行的 React 应用程序的 CSS in JS 库，它允许通过编写简单的 JavaScript 代码将样式应用于元素。它提供了一种更好的方法来管理样式，很大程度上减少了 CSS 的样板代码。本文将介绍如何使用 emotions NPM 包，让你更好地使用 CSS in JS。
安装
在开始之前，我们需要先安装 emotions。要安装 emotions，请打开终端并输入以下命令：
npm install --save @emotion/core
注意，我们同时安装了 @emotion/core，这是 emotions 的核心包，负责管理样式。
使用 emotions
安装之后，我们就可以开始使用 emotions 了。让我们来看一个简单的例子，该例子将悬停元素的背景颜色更改为红色：
-- -------------------- ---- -------
------ ------ ---- ------------------
----- ------ - --------------
----------------- ------
------ ------
------- --- ----- ------
----------- --- ---- -----
------- -
----------------- ----
------ ------
-
--
-------- --------- -
------ -
--------
----
---------
--
-在这个例子中，我们定义了一个组件 Button，它是一个 button 元素样式的缩写。我们使用样式模板字符串来定义应用于元素的样式。在这个字符串中，我们可以使用所有 CSS 属性，并使用与 CSS 类似的语法来定义样式规则。
注意，我们不需要引用任何其他样式表或类名。一旦我们定义了按钮组件，我们就可以像使用任何其他 React 组件一样使用它。
重用样式
在 React 中，组件经常具有相似的样式，但稍有不同。为了避免过度代码冗余，我们可以在组件之间共享样式。
例如，让我们想象一个具有两个彼此相似的按钮，一个用于登录，另一个用于注册。我们可以为这两个按钮定义单独的组件：
-- -------------------- ---- -------
------ ------ ---- ------------------
----- ------ - --------------
----------------- ------
------ ------
------- --- ----- ------
----------- --- ---- -----
------- -
----------------- ----
------ ------
-
--
----- ----------- - ---------------
------ -----
--
----- -------------- - ---------------
------ ------
--
-------- --------- -
------ -
--
-------------
--
--------------
----------------
--
-----------------
---
--
-在这个例子中，我们定义了一个 Button 组件，然后定义了两个其他组件 LoginButton 和 RegisterButton，它们会继承 Button 的所有样式规则。我们可以通过覆盖 color 属性来更改两个按钮的颜色。
注意，我们使用 styled(Button) 语法来创建复合样式。这将使 LoginButton 和 RegisterButton 继承 Button 的样式，同时提供了一些额外的样式，例如颜色。
传递 props
在 React 中，props 是组件之间通信的一种通用方式。在 emotions 中，我们也可以使用 props 来定义样式。
例如，假设我们有一个具有两种颜色的按钮，这些颜色由组件属性指定。我们可以这样定义组件：
-- -------------------- ---- -------
------ ------ ---- ------------------
----- ------ - --------------
----------------- ------- -- ------------------
------ ------- -- -------------
------- --- ----- ------
----------- --- ---- -----
------- -
----------------- ----
------ ------
-
--
-------- --------- -
------ -
--
------- ------------------ --------------
----
---------
------- ------------------ --------------
----
---------
---
--
-在这个例子中，我们定义了一个 Button 组件，它将背景和颜色属性传递到样式规则中。我们可以像使用任何其他 React 组件一样使用这个组件，并根据需要传递不同的属性。
总结
在本文中，我们介绍了如何使用 emotions 包来管理 React 应用程序的样式。我们学习了如何定义单独的样式组件，如何在组件之间共享样式，以及如何使用 props 传递样式规则。使用 emotions，我们可以更有效地管理样式，并提高代码重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1fa563576b7b1ecd85