Styled System lets you quickly build custom UI components with constraint-based style props based on scales defined in your theme. 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. Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax. Most CSS-in-JS libraries include a ThemeProvider to provide values through React context. Import the styled components ThemeProvider in the root of your application and pass the theme to the theme prop.
Features
- Try the examples on CodeSandbox
- Each style function exposes its own set of component props
- Set responsive width, margin, padding, font-size, etc.
- Responsive Styles
- Works with any color palette
- Typographic scale