@styled-system-ts/variant

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

Usage

1import styled from 'styled-components';
2import variant from '@styled-system-ts/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