简介
在前端开发中，我们常常需要处理样式。样式的处理不仅仅是 CSS 的书写，更多的是关于样式的管理和配置。在项目中，如果需要不断地改变一些组件的样式，需要经常编辑 CSS，这无疑增加了开发量，也不利于维护。
styled-system-mapper 是一个 npm 包，可以帮助我们管理和配置组件的样式。它是一个通过映射的方式，在组件中传递 props，并对应到自己需要的样式属性中。这样我们就可以在不使用 CSS 的情况下，快速配置和管理组件的样式。
安装
安装 styled-system-mapper，可以直接在命令行中使用 npm 安装：
npm install styled-system-mapper
使用
使用 styled-system-mapper，需要先定义样式的属性：
import styled from "styled-components";
import { space, fontSize, color } from "styled-system";
const Box = styled.div`
${space}
${fontSize}
${color}
`;在组件中传递 props，就可以实现样式的变化：
<Box
p={3}
fontSize={[1, 2, 3]}
color="white"
bg="black"
>
Hello World
</Box>这样组件就会被赋予指定的样式。这里我们使用了 prop 传递样式属性的方式，p、fontSize、color、bg 都是 styled-system-mapper 中预定义的属性。
以上代码中的 p={3} 表示设置 padding 属性为 3，同理 fontSize={[1, 2, 3]} 表示在不同的屏幕尺寸下设置不同的字体大小。这种配置方式既方便，又可以确保页面在不同屏幕下都能够得到正确的呈现。
高级配置
styled-system-mapper 还提供了更高级的配置方式，可以使用 createMapper 创建自己的映射函数，从而可以覆盖、扩展预定义的映射。
可以配置的属性有 margin、padding、width、height、border、color 等等。下面是一个自定义 margin 的示例：
-- -------------------- ---- -------
------ - ------------ - ---- -----------------------
----- ------ - --------------
-------- -
--------- -----
--------- ----------
--
---
----- --- - -----------
---------------------
--
---- ------ -- ----- ---- ------------ --
----- ----- - -
-------- -
-- ------
-- ------
-- -------
--
--这里我们使用 createMapper() 函数创建自己的映射函数。在 mapper 中，我们定义了 propName 和 themeKey 两个属性。
propName 表示将要在组件中使用的 prop 名称，这里我们使用 "mg"。
themeKey 表示从 theme 中获取对应样式属性的 key 值，这里我们使用 "margins"。这里的 theme 可以在应用中全局导入，进行公共的样式管理。
总结
styled-system-mapper 可以帮助我们更方便、更高效地管理和配置前端组件的样式。它通过 prop 传递样式属性的方式，让样式配置变得更加简单。同时，它提供了灵活的高级配置方式，可以按照我们需要，灵活定义自己的样式映射。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822b27