Package Exports

@class101/styled-system__variant

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@class101/styled-system__variant) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@class101/styled-system__variant

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

Usage

import styled from 'styled-components'
import variant from '@class101/styled-system__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 shape
prop: (default variant) custom prop name for variant
scale: optional theme key for adding variants to the theme object

MIT License