0.3.1 • Published 4 years ago
styled-system-ts v0.3.1
Styled System Typescript
Responsive, theme-based style props for building design systems with React https://styled-system.com
npm i styled-system
Features
- Add style props that hook into your own theme
- Quickly set responsive font-size, margin, padding, width, and more with props
- Influenced by constraint-based design system principles
- Typographic scale
- Spacing scale for margin and padding
- Works with any color palette
- Works with most css-in-js libraries, including styled-components & emotion
- Used in Rebass, Reflexbox, and the Priceline Design System
Table of Contents
Usage
// 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-ts';
// Add styled-system functions to your component
const Box = styled.div`
${space}
${layout}
${typography}
${color}
`;
Each style function exposes its own set of component props that handle styles based on values defined in a theme.
// 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 Style Props
Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax. Read more
// 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 ]} />
To learn more, see the Getting Started guide or read the docs.
Docs
- Getting Started
- Responsive Styles
- How it Works
- Custom Props
- Variants
- API
- Reference Table
- Packages
- Guides
- @styled-system-ts/css
Built with Styled System Typescript
- Nothing at the moment