Discussion on: Create a highly reusable button with styled-system and styled-components.

[Benneth Yankey]

Very nice, but part of the reusable component design lives in the theme config..😔

Check out stitches js being built by modulz. It utilizes styled-system and styled-component under the hood to provide first class support for variant, compound variant, etc all right within the component itself. It will blow you away!!

E.g

const {styled} = "@stitches/react";

const Button = styled("button", {
    // base styles,

    variants: {
       variant: {},
       size: {}
     },

    compoundVariants: [
       {
           variant: // value,
           size: // value,
           css: {} // apply styles
       },
          // other compound variants
    ],

    defaultVariants: {
         variant: // value,
         size: // value
    }
});

Hope it helps.