API

The nuts and bolts of CSS Components' API.

styled

A function to create a component including its styles and variants. It receives:

• element or component: a HTML element (div) or a React Component (Component)
• config: an object with the following properties:
  • base: an css class with the base styles
  • variants: an object with the variants styles
  • defaultVariants: an array with the default variants
  • compoundVariants: an array with the compound variants
  • domPassthrough: an array with the variant values to pass to the DOM element

1const Button = styled('button', {
2  css: "baseStyle"
3  variants: {
4    variant: {
5      primary: "primaryStyle",
6      secondary: "secondaryStyle",
7    },
8  },
9});
10
11// Use it
12<Button>Button</Button>
13<Button variant="primary">Primary button</Button>
14