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>BaseButton</BaseButton>
<CheckoutButton>CheckoutButton</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">BaseButton</BaseButton>
<CheckoutButton size="small">CheckoutButton</CheckoutButton>
<BaseButton size="large">BaseButton</BaseButton>
<CheckoutButton size="large">CheckoutButton</CheckoutButton>
</>
);