简介
styled-system 是一个基于 CSS-in-JS 的库，它提供了一系列函数、组件和样式属性的封装，可以大大简化前端开发中样式的编写和管理。
本文将介绍如何使用 styled-system 来快速创建可复用的样式组件，并且结合实际示例代码演示其使用方法。
安装和配置
在使用 styled-system 之前，需要先安装依赖。我们可以使用 npm 或者 yarn 进行安装：
npm install styled-components styled-system
或者
yarn add styled-components styled-system
安装完成后，我们需要在项目中引入 styled-components 和 styled-system。在 React 项目中，可以这样做：
import styled from 'styled-components';
import { space, color, layout } from 'styled-system';
const Box = styled.div`
${space}
${color}
${layout}
`;这里我们定义了一个 Box 组件，并且使用了 space，color 和 layout 这三个 styled-system 提供的样式属性。
样式属性
styled-system 提供了很多常用的样式属性，包括间距、宽高、颜色、字体、边框等等。下面是一些常用的样式属性及其说明：
space：设置元素的内边距和外边距。color：设置元素的颜色属性。layout：设置元素的宽度、高度、最大宽度、最小宽度、最大高度和最小高度等布局属性。typography：设置元素的字体大小、行高、字重、字体系列和文本对齐等属性。border：设置元素的边框属性，包括边框宽度、边框样式和边框颜色等。
除了上面列出的属性外，styled-system 还提供了很多其他的属性，具体可以参考官方文档。
使用示例
下面我们来演示如何使用 styled-system 创建一个可复用的样式组件。假设我们需要创建一个带有图标和标题的卡片组件，其 HTML 结构如下：
<div class="card"> <div class="icon"></div> <h2 class="title"></h2> </div>
首先，我们需要定义这个组件，并为其设置基础样式：
-- -------------------- ---- ------- ------ ------ ---- -------------------- ------ - ------ ------ ------ - ---- ---------------- ----- ---- - ----------- -------- -------- --------- -------- ----- ------------ ------- -- ----- ---- - ----------- -------- -------- --------- ------ ----- ------- ----- -------------- ---- ----------------- ----- -- ----- ----- - ---------- -------- -------- --------- ---------- ----- --
这里我们分别定义了 Card、Icon 和 Title 三个组件，并使用了 space、color 和 layout 这三个 styled-system 提供的样式属性。注意，我们在每个组件中都引入了这三个属性，这是因为它们都是常用的样式属性。
接下来，我们可以将这些组件组合起来，创建一个完整的卡片组件：
import React from 'react';
const Card = ({ icon, title }) => (
<div className="card">
<Icon mr={3} />
<Title>{title}</Title>
</div>
);这里我们通过传递 icon 和 title 属性来渲染卡片组件，其中 Icon 组件设置了右边距为 3，这是因为我们希望图标和标题之间有
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46378