Search code examples
cssreactjsstitches

How can a prop value be used in an Stitches js component?

How to pass a prop value into a Stitchesjs component and use it in the component definition?

This is a common pattern in styled-components. In Stitches, however, I can't seem to find a way. Take this component for example:

const Spacer = styled('div', {
    '16': {marginBottom: '$16'},

    variants: {
        size: {
            '20': {marginBottom: '$20'}
        }
    }
});

Instead of creating 10 variants, I want to pass the amount trough a prop:

<Spacer size={'30px'} />

or even better:

<Spacer size={'$sizes$3'} />

How can I use this value so that the marginBottom matches whatever I give it?

Solution

  • Take a look at https://stitches.dev/docs/utils.

    And then you can use like this:

    <div css={{ mb: '$40' }} />