Composing Components

Composing one Stitches component into another.

Stitches components can be composed via the styled function.

const BaseButton = styled('button', {});

const CheckoutButton = styled(BaseButton, {
  borderRadius: 0,
  backgroundColor: 'hotpink',
  color: 'white',
  '&:hover': {
    backgroundColor: 'deeppink',
  },
});

() => (
  <>
    <BaseButton>Base button</BaseButton>
    <CheckoutButton>Checkout button</CheckoutButton>
  </>
);

When you compose a component which has variants, they will be inherited.

const BaseButton = styled('button', {
  // base styles

  variants: {
    size: {
      small: {},
      large: {},
    },
  },
});

const CheckoutButton = styled(BaseButton, {
  // checkout styles
});

() => (
  <>
    <BaseButton size="small">Base button</BaseButton>
    <CheckoutButton size="small">Checkout button</CheckoutButton>
    <BaseButton size="large">Base button</BaseButton>
    <CheckoutButton size="large">Checkout button</CheckoutButton>
  </>
);