@ class101/ classd- system css

系统样式 css 道具

npm i @class101/styled-system__css

样式系统 CSS 允许您使用响应性,有主题意识的样式系统快捷键来写入样式对象.

// usage with the css prop
import React from 'react'
import css from '@class101/styled-system__css'

const Beep = props =>
  <div
    {...props}
    css={css({
      fontSize: [4, 5, 6],
      color: 'primary',
    })}
  />

// usage with a styled HOC
import styled from '@emotion/styled'
import css from '@class101/styled-system__css'

const Boop = styled('div')(
  css({
    fontSize: [ 4, 5, 6 ],
    color: 'primary',
    bg: 'gray',
    '&:hover': {
      color: 'secondary',
    },
  })
)

让Css的道具与 styled-components, (中文(简体) ), babel-plugin-styled-components 必须启用.

主题密钥

样式对象中的以下键将和样式系统道具相同,从中拉取值 theme 对象.

响应阵列

所有 CSS 属性接受数组作为响应样式的值.

<div
  css={css({
    fontSize: [ 4, 5, 6 ],
  })}
/>

在这个例子中, fontSize 接受数组,从 theme.fontSizes 缩放,以及 borderBottom 作为简单的CSS通过.

<div
  css={css({
    // Styled System key
    fontSize: [ 3, 4, 5 ],
    // CSS property
    borderBottom: '2px solid tomato',
  })}
/>

MIT 许可证