styled-utils
Introduction
styled-utils
is a collection of util functions for styled-components
Installation
npm install styled-utils --save
yarn add styled-utils
Usage
Play with it here
Example
const Button = styleda` display: inline-flex; justify-content: center; align-items: center; padding: 0 1.5em; height: 2.25em; border: 1px solid transparent; border-radius: 5px; margin: 0 5px 5px 0; cursor: pointer; text-align: center; ` const theme = {} themepalettes = primary: '#1b8ceb' '#106cb9' success: '#4caf50' '#388e3c' danger: '#e91e63' '#c2185b' white: '#fff' '#fff' themesizes = maxWidth: '600px' font: tiny: '0.55rem' small: '0.75rem' medium: '1rem' large: '1.25rem' big: '1.5rem' huge: '2rem' const Main = { return <ThemeProvider theme=theme> <div> <Button color='primary'>Click Me</Button> <Button color='success'>Click Me</Button> <Button color='danger' isOutlined>Click Me</Button> <Button color='white' isInverted>Click Me</Button> <Button color='primary' display='flex' size='large'>Click Me</Button> <Button color='primary' size='tiny'>Click Me</Button> </div> </ThemeProvider> }