@styled-system/variant

Read the docs: https://styled-system.com/variants

Usage

1import styled from 'styled-components'
2import variant from '@styled-system/variant'
3
4const Button = styled('button')(
5  variant({
6    variants: {
7      primary: {
8        color: 'white',
9        bg: 'primary',
10        ':hover': {
11          bg: 'black',
12        }
13      },
14      secondary: {
15        color: 'white',
16        bg: 'secondary',
17        ':hover': {
18          bg: 'black',
19        }
20      },
21    }
22  })
23)
24
25// <Button variant='primary' />
26// <Button variant='secondary' />

Options

• variants: object of theme-aware variant styles with user-defined shape
• prop: (default variant) custom prop name for variant
• scale: optional theme key for adding variants to the theme object

MIT License