看一下https://stitches.dev/docs/utils。
然后你可以这样使用：

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

我一直在寻找这个答案，尝试了几种不同的方法。
对我来说，最简单的方法是本地范围的主题令牌。
因此，已设置样式的构件将如下所示：

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

然后将本地作用域的令牌传递到css prop：

<Spacer css={{ $$marginSize: '$sizes$3' }} />

在Stitches Github上曾经讨论过将动态值作为属性传递的可能性。但是Stitches的目标是尽可能地拥有最小的runTime，所以它没有被实现！
Github PR stitches
当您需要在可以是任何值的针脚中使用JSX变量时，一种解决方案是使用CSS变量;
所有的stitch元素都获得css属性，您可以通过它传递新属性！

样式组件：

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

组件：

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 }} />
    </>
  )
}

到目前为止，最好的解决方案，已为我工作的这个非常问题。简化了代码，更好地维护以后！