# @class101/styled-system 中文文档

规范地址：https://npmcn.com/package/%40class101/styled-system/

版本：5\.3\.3
npm 元数据更新时间：2024-08-19T03:12:27.923Z
中文译文更新时间：2026-11-09T23:49:03.387Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40class101/styled-system
原文对照：https://npmcn.com/package/%40class101/styled-system/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：83.3 kB，5 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：13 个
- 首次发布：2021-09-14T09:57:11.987Z
- 最新版本发布：2021-11-01T07:02:13.671Z
- 近 30 天下载量：4093（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）

## 中文简介

以主题为基础的风格道具,用于使用React的建筑设计系统

## 安装

```sh
npm install @class101/styled-system
```

也可以使用：`pnpm add @class101/styled-system`、`yarn add @class101/styled-system`、`bun add @class101/styled-system`

## README

![](https://styled-system.com/logo.svg)

# 样式系统

以主题为基础的风格道具,用于使用React的建筑设计系统 [https://styled-system.com (中文(简体) )](https://styled-system.com/)

[![stars](https://flat.badgen.net/github/stars/styled-system/styled-system)](https://github.com/styled-system/styled-system) [![Build Status](https://flat.badgen.net/circleci/github/styled-system/styled-system/master)](https://circleci.com/gh/styled-system/styled-system) [![Downloads](https://flat.badgen.net/npm/dm/styled-system)](https://npmjs.com/package/styled-system) [![Version](https://flat.badgen.net/npm/v/styled-system)](https://npmjs.com/package/styled-system) [![spectrum-badge](https://flat.badgen.net/badge/spectrum/community/purple)](https://spectrum.chat/styled-system) ![size](https://flat.badgen.net/bundlephobia/minzip/styled-system) ![MIT License](https://flat.badgen.net/badge/license/MIT/blue) [![system-ui/theme](https://flat.badgen.net/badge/system-ui/theme/black)](https://system-ui.com/theme)

```sh
npm i styled-system
```

## 特征

-   将样式道具添加到您自己的主题中
-   快速设置响应字体大小、 边距、 贴垫、 宽度, 以及更多道具
-   受基于制约的设计系统原则的影响
-   拼写比例
-   边距和挂起的间距
-   用任何调色板工作
-   与大多数cs-in-js图书馆合作,包括 [样式组件](https://github.com/styled-components/styled-components) 打开 [情绪](https://github.com/emotion-js/emotion)
-   用于 [反弹](https://rebassjs.org/), (中文(简体) ), [缩写框](https://rebassjs.org/reflexbox/),则 [价格线设计系统](https://github.com/priceline/design-system)

> 老实说,这是我现在最爱的建造UI组件的方法 ![party parrot](https://github.com/jmhobbs/cultofthepartyparrot.com/raw/master/parrots/parrot.gif)" (中文(简体) )
> 
> – 说吧 – [瓦伦·瓦恰尔](https://varun.ca/styled-system/)

> "如果你以前没看过"Styled System",就帮自己一个忙,检查一下. 这对我思考面向组件的风格产生了巨大影响"
> 
> – 说吧 – [马克·达尔格利什](https://mobile.twitter.com/markdalgleish/status/1107732365474848768)

> "cs-in-js的未来会 看起来像一个风格的系统 与它的响应价值。"  
> 
> – 说吧 – [凯·霍亨伯格](https://mobile.twitter.com/kyehohenberger/status/905474043729416192)

> 从@tachyons css开始  
> 
> – 说吧 – [内森·杨](https://mobile.twitter.com/nathanyoung/status/891353221880360960)

> "如果您用 React 制作网站/应用程序, 请检查Styled System, 如果您还没有。 你会惊讶你能建多快"
> 
> – 说吧 – [大卫·耶泽](https://mobile.twitter.com/davidyeiser/status/965920740582285312)

> "如果你喜欢塔克扬斯 你会喜欢有风格的系统" 如果你不喜欢塔克龙, 你会喜欢有风格的系统。"
> 
> – 说吧 – [亚当·摩斯](https://mobile.twitter.com/mrmrs_/status/913189805055401984)

> "造型系统是我用过的最好的图书馆之一"
> 
> – 说吧 – [米哈·塞德伊(英语:Miha Sedej)](https://tresko.dev/theming-react-datepicker-datepicker-react-styled)

## 试试看吧

试试看 [实例](https://npmcn.com/package/%40class101/styled-system/examples) 在代码对话框上

-   [基本示例](https://codesandbox.io/s/github/styled-system/styled-system/tree/master/examples/basic)
-   [情感](https://codesandbox.io/s/github/styled-system/styled-system/tree/master/examples/emotion)

### 目录

-   [使用量](https://npmcn.com/package/%40class101/styled-system/#readme-usage)
-   [文档](https://npmcn.com/package/%40class101/styled-system/#readme-docs)
-   [进一步阅读](https://npmcn.com/package/%40class101/styled-system/#readme-further-reading)
-   [以样式系统构建](https://npmcn.com/package/%40class101/styled-system/#readme-built-with-styled-system)
-   [相关](https://npmcn.com/package/%40class101/styled-system/#readme-related)

## 使用量

```jsx
// Example uses styled-components, but styled-system works with most other css-in-js libraries as well
import styled from 'styled-components'
import { space, layout, typography, color } from 'styled-system'

// Add styled-system functions to your component
const Box = styled.div`
  ${space}
  ${layout}
  ${typography}
  ${color}
`
```

每个样式函数都暴露出自己的组件道具 用于处理基于主题中定义的值的样式.

```jsx
// width: 50%
<Box width={1/2} />

// font-size: 20px (theme.fontSizes[4])
<Box fontSize={4} />

// margin: 16px (theme.space[2])
<Box m={2} />

// padding: 32px (theme.space[3])
<Box p={3} />

// color
<Box color='tomato' />

// color: #333 (theme.colors.gray[0])
<Box color='gray.0' />

// background color
<Box bg='tomato' />
```

## 响应样式道具

设置应答宽度,边距,平板字,字体大小等属性,以及具有短手数组语法的其他属性. [更多信息](https://styled-system.com/responsive-styles)

```jsx
// responsive width
<Box width={[ 1, 1/2, 1/4 ]} />

// responsive font-size
<Box fontSize={[ 2, 3, 4 ]} />

// responsive margin
<Box m={[ 1, 2, 3 ]} />

// responsive padding
<Box p={[ 1, 2, 3 ]} />
```

要学习更多,看看 [开始](https://styled-system.com/getting-started) 引导或阅读文件.

## 文档

-   [开始](https://styled-system.com/getting-started)
-   [响应样式](https://styled-system.com/responsive-styles)
-   [如何运作](https://styled-system.com/how-it-works)
-   [自定义道具](https://styled-system.com/custom-props)
-   [备选案文](https://styled-system.com/variants)
-   [API 密码](https://styled-system.com/api)
-   [参考表格](https://styled-system.com/table)
-   [软件包](https://styled-system.com/packages)
-   [指南](https://styled-system.com/guides)
-   [@ class101/ classd- system css](https://styled-system.com/css)

* * *

## 进一步阅读

-   [基于组件的设计系统](https://varun.ca/styled-system/)
-   [用样式系统构建更好的组件库](https://medium.com/styled-components/build-better-component-libraries-with-styled-system-4951653d54ee)
-   [用样式系统构建一个美丽的、可重复使用的按钮](https://johno.com/styled-system-button)
-   [在反应中定义组件 API](http://jxnblk.com/blog/defining-component-apis-in-react/)
-   [样式化的三子系统](https://jxnblk.com/blog/the-three-tenets-of-styled-system/)

## 以样式系统构建

-   [初级组件](https://primer.style/components)
-   [价格线设计系统](https://pricelinelabs.github.io/design-system/)
-   [云浮设计颜色](https://cloudflare.design/color/)
-   [样式系统 HTML](https://johnpolacek.github.io/styled-system-html/)
-   [反弹](https://rebassjs.org/)
-   [缩写框](https://rebassjs.org/reflexbox/)
-   [@ datepicker- react/ styled (已删除)](https://github.com/tresko/react-datepicker)

## 相关

-   [系统用户界面](https://system-ui.com/)
-   [相相会. 聊天社区](https://spectrum.chat/styled-system)
-   [样式组件](https://github.com/styled-components/styled-components)
-   [情绪](https://github.com/emotion-js/emotion)

[MIT 许可证](https://npmcn.com/package/%40class101/styled-system/LICENSE.md)

## 常见问题

### @class101/styled-system 是什么？

以主题为基础的风格道具,用于使用React的建筑设计系统

### 如何安装 @class101/styled-system？

在项目目录运行 npm install @class101/styled-system，或使用 pnpm add / yarn add / bun add。

### @class101/styled-system 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @class101/styled-system 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @class101/styled-system 可以商用吗？

@class101/styled-system 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @class101/styled-system 的下载量有多少？

根据 npm 官方下载统计，@class101/styled-system 在 2026/10/10 – 2026/11/08 这 30 天内被下载 4,093 次，日均约 136 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @class101/styled-system 还在维护吗？

最新版本 5\.3\.3 发布于 2021/11/01（5 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/09/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。