bbg / styled-component-variant

Vary styles applied to React components using props

styled-component-variant

A tiny helper to enable you to vary your React components styles based on a prop value.

npm i styled-component-variant

Usage:

import variant from 'styled-component-variant';

const primary = css`
  background-color: 'blue';
`;

const secondary = css`
  background-color: 'orange';
`;

// you can use the theme property in your styles
const tertiary = ({theme}) => css`
  margin: ${theme.spacing.xs2};
`;

const use = variant('use', {
  primary,
  secondary,
  tertiary,
});

const MyButton = styled('button')(use);

// render a blue button
<MyButton use="primary">Click me</MyButton>

// render an orange button
<MyButton use="secondary">Click me</MyButton>