@styled-system-ts/variant
Read the docs: https://styled-system.com/variants
Usage
import styled from 'styled-components';
import variant from '@styled-system-ts/variant';
const Button = styled('button')(
variant({
variants: {
primary: {
color: 'white',
bg: 'primary',
':hover': {
bg: 'black',
},
},
secondary: {
color: 'white',
bg: 'secondary',
':hover': {
bg: 'black',
},
},
},
})
);
// <Button variant='primary' />
// <Button variant='secondary' />
Options
variants: object of theme-aware variant styles with user-defined shapeprop: (default variant) custom prop name for variantscale: optional theme key for adding variants to the theme object
MIT License
