3

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?

Edy Bourne
  • 5,679
  • 13
  • 53
  • 101
  • As far I understand that is a limitation of the design, since it has almost no runtime, it cannot interpolate props on the fly. – Javed Jan 28 '23 at 07:20

3 Answers3

4

There was a discussion on Stitches Github about the possibility to pass dynamic values as property. But the goal of stitches is to have the smallest runTime possible, so it was not implemented !

Github PR stitches

When you need to use a JSX variable in stitches that can be any value, one solution would be to use CSS variables;

All stitches elements get the css property, and you can pass new properties through it!

Styled component:

    export const Box = styled('div', {
    marginTop: 'var(--margin-top)',
    backgroundColor: 'red',
    width: '200px',
    height: '200px',
    })

Component:


export function Hero({props = 200 }) {

  const variableExample = `${props}px`
  return (
    <>
    <Box css={{ '--margin-top': '10px' }} />
    <Box css={{ '--margin-top': '150px' }} />
    <Box css={{ '--margin-top': variableExample }} />
    </>
  )
}

By far the best solution that has worked for me for this very problem. simplifies the code and is better to maintain later!

Leandro Rodrigues
  • 41
  • 3
3

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

And then you can use like this:

<div css={{ mb: '$40' }} />
Murillo de Miranda Pereira
  • 106
  • 5
1

I was looking for this answer and tried a few different ways.

The easiest way for me turned out to be locally scoped theme-tokens.

So your styled component would look like this:

const Spacer = styled('div', {
    marginBottom: '$$marginSize',
});

And then pass the locally scoped token into the css prop:

<Spacer css={{ $$marginSize: '$sizes$3' }} />
blitzk
  • 11
  • 1
  • This works, but will create one single custom css variable, if you give spacer a new prop via css, it will re-write the old value – Javed Jan 28 '23 at 07:26