什么是 @styled-system/space
@styled-system/space 是一个用于在 React 应用中管理间距的 npm 包，它提供了可以轻松设置间距的 CSS 属性。它建立在 styled-system 的基础上，可以补充 styled-system 不能覆盖的一些常见用例。
安装
要安装 @styled-system/space，只需在终端中执行以下命令：
npm install @styled-system/space
如何使用它？
首先，您需要导入用于使用 @styled-system/space 的组件的样式对象和系统组件。例如，如果您要使用 Box 组件，则需要导入以下样式对象和系统组件：
import { Box } from 'styled-system'
import { space } from '@styled-system/space'然后，您可以通过 space 属性轻松设置间距。例如，您可以为 Box 设置一个间距值 4：
<Box m={4}></Box>您也可以使用数组指定多个值：
<Box mt={[2, 4, 6]}></Box>不同的间距属性
@styled-system/space 提供了四个不同的间距属性：
- margin (m)
- padding (p)
- marginLeft (ml)
- marginRight (mr)
每个属性都可以使用类似于上面示例中的方式进行设置。
使用主题
@styled-system/space 还可以使用主题设置空间值。首先，您需要在主题对象中为间距属性添加默认值：
const theme = {
space: [0, 4, 8, 16, 32],
}然后，在 Box 组件中使用空间属性时，您可以使用主题中定义的值：
<Box mt={3}></Box>响应式断点
@styled-system/space 还可以轻松地针对不同的屏幕宽度设置间距。例如，要在媒体查询的大屏幕尺寸上设置 margin 值为 8，可以这样做：
<Box m={[1, 3, 5, 8]}></Box>在上面的示例中，第一个值是通常的 margin 值，后面的值依次对应于不同尺寸的响应断点。
继承样式
某些情况下，您可能希望为已经由其他样式设置的元素添加间距。 @styled-system/space 还可以轻松地实现这一点。例如，要在现有的 margin 值为 4 的元素上添加额外的 margin 2，则可以这样做：
<Box m={2} css={{ '& > *:not(:last-child)': { marginRight: 4 } }}>在上面的示例中，我们使用了 CSS 后代选择器将 margin-right 添加到了所有不是最后一个子元素的子元素中。
总结
@styled-system/space 是一个非常实用的 npm 包，它可以从代码中大大简化间距的管理。使用它可以轻松设置间距，并且可以使用主题或响应式断点进行配置。重要的是要知道，这个 npm 包的构建基于 styled-system，可以帮助我们更好地组织样式代码。
完整示例代码
-- -------------------- ---- -------
------ ----- ---- -------
------ - --- - ---- ---------------
------ - ----- - ---- ----------------------
----- ----- - -
------ --- -- -- --- ----
-
----- --- - -- -- -
------ -
----
-----
-----
------ ---------------- ----------- --
-------------
-
---- ----- ------ ---------------- -------- -------- ------ ---
--------- -----------
---- ------ ------ ---------------- ------- ------- ------ ---------
------
---- ------ -- -- --- ------ ---------------- -------- -------- ------ ---
--------- -----------
---- ------ ------ ---------------- ------- ------- ------ ---------
------
----
-----
------ ---------------- -------- -------- ------- -- - -------------------- - ------------ - - --
-
--------- -----------
---- ------ ---------------- ------- ------- ------ ---------
---- ------ ---------------- -------- ------- ------ ---------
---- ------ ---------------- --------- ------- ------ ---------
---- ------ ---------------- ------ ------- ------ ---------
------
------
-
-
------ ------- ---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc69bb5cbfe1ea061225c