样式系统
以主题为基础的风格道具,用于使用React的建筑设计系统 https://styled-system.com (中文(简体) )
npm i styled-system
特征
- 将样式道具添加到您自己的主题中
- 快速设置响应字体大小、 边距、 贴垫、 宽度, 以及更多道具
- 受基于制约的设计系统原则的影响
- 拼写比例
- 边距和挂起的间距
- 用任何调色板工作
- 与大多数cs-in-js图书馆合作,包括 样式组件 打开 情绪
- 用于 反弹, (中文(简体) ), 缩写框,则 价格线设计系统
老实说,这是我现在最爱的建造UI组件的方法
" (中文(简体) )
– 说吧 – 瓦伦·瓦恰尔
"如果你以前没看过"Styled System",就帮自己一个忙,检查一下. 这对我思考面向组件的风格产生了巨大影响"
– 说吧 – 马克·达尔格利什
"cs-in-js的未来会 看起来像一个风格的系统 与它的响应价值。"
– 说吧 – 凯·霍亨伯格
从@tachyons css开始
– 说吧 – 内森·杨
"如果您用 React 制作网站/应用程序, 请检查Styled System, 如果您还没有。 你会惊讶你能建多快"
– 说吧 – 大卫·耶泽
"如果你喜欢塔克扬斯 你会喜欢有风格的系统" 如果你不喜欢塔克龙, 你会喜欢有风格的系统。"
– 说吧 – 亚当·摩斯
"造型系统是我用过的最好的图书馆之一"
– 说吧 – 米哈·塞德伊(英语:Miha Sedej)
试试看吧
试试看 实例 在代码对话框上
目录
使用量
// 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}
`
每个样式函数都暴露出自己的组件道具 用于处理基于主题中定义的值的样式.
// 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' />
响应样式道具
设置应答宽度,边距,平板字,字体大小等属性,以及具有短手数组语法的其他属性. 更多信息
// 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 ]} />
要学习更多,看看 开始 引导或阅读文件.