简介
在前端开发过程中，我们常常需要将 UI 组件封装成可复用的组件。其中，组件的样式是一项重要的内容。@emotion/primitives-core 是一种针对原子级样式的解决方案，此 npm 包为实现此功能而生。
@emotion/primitives-core 是一个用于创建原子级样式的工具包。使用该包，我们可以针对每个具体的元素，为它们定义对应的样式，包括颜色、边框、尺寸、字体等，并方便地将这些样式应用到项目中的各个组件。
安装
我们可以使用以下命令在项目中安装 @emotion/primitives-core：
npm install @emotion/primitives-core --save
使用
引入
在使用 @emotion/primitives-core 之前，我们需要将它引入到项目中。
import {createStyleSystem} from '@emotion/primitives-core';核心 API
createStyleSystem
createStyleSystem 函数是创建样式系统的核心 API。
它返回的是一个接受 props 参数的函数，该函数将返回一个样式对象，props 对象中的键值对将作为样式系统中的属性使用。样式对象中的键值对将会自动合并到一起，生成样式对象。如果值为函数，则该函数将使用 props 中对相应的键值进行预处理。
以下是一个使用 createStyleSystem 函数的示例：
-- -------------------- ---- -------
------ ------------------- ---- ---------------------------
----- ----------- - -------------------
------ -
--- ------
--- --------
--
---------------- -
--- --------
--- ------
--
--------- -
--- -------
--- -------
--
---
----- ----- - -------------
------ -----
---------------- -----
--------- -------- -- ----- --- ---- - ------ - --------
---在这个示例中，我们定义了三个属性：color、backgroundColor 和 fontSize。在使用样式系统时，我们定义了三个与这些属性相对应的值。样式系统将针对这些属性值生成样式。
示例
以下是一个展示 @emotion/primitives-core 内置功能的示例代码：
-- -------------------- ---- -------
------ ------------------- ---- ---------------------------
------ ------ ----- ---- ---------------
----- ----------- - -------------------
------ -
--- ------
--- --------
--
---------------- -
--- --------
--- ------
--
--------- -
--- -------
--- -------
--
---
----- ----------- - ------- -- -------------
---------------- -----
------ --------- -- -------------
------- ---------- -- --------------
----------
----- ------------- - ------- -- -------------
------ -----
--------- -------- -- ---- --- ---- - ------ - -------
----------
----- --- - -------- ------- ---------- -- -
----- -------------------------- ----------
----------
-------
--
----- ----- - ------- ---------- -- -
----- ------------------------------
----------
-------
--
----- --- - -- -- -
---- ----------- ------------
------ ----------
---- ---- ----- ---- ----
--------
------ ----------
---- ---- ------ ---- ----
--------
------
--在上述示例中，我们定义了两个组件 Box 和 Label。另外，我们定义了两个样式系统，用于为这些组件提供样式。在 Box 组件中，我们将样式对象应用于 <View> 元素上。在 Label 组件中，我们将样式对象应用于 <Text> 元素上。
运行代码后，我们会得到一个外观如下的组件：
<Box width={200} height={50}>
<Text style={{color: 'white', fontSize: '12px'}} >
Text with small font size
</Text>
<Text style={{color: 'white', fontSize: '16px'}} >
Text with medium font size
</Text>
</Box>意义
通过学习使用 @emotion/primitives-core，我们可以更快地创建经过优化的原子级样式代码，并做到代码复用。这大大提高了前端开发的效率，让我们的代码更加具有易读性和可维护性。在面对大型项目的开发时，@emotion/primitives-core 的优势尤为明显。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f68ccd7a9b7065299ccb7df