Why can't I use stitches token in css prop?

Question

I believe my question is simple for those who work with stitches on a daily basis.

I was following Pedro Duarte's post and saw that there is a way to create a configuration file, that is, stitches.config.ts .

I did this, however, when trying to use the tokens it didn't work, it was defined like this:

 export const { styled } = createStitches({
  theme: {
    turq: 'rgba(0, 245, 196, 1)',
  }
})

After creating this token I moved on to the next step which was to create a component, which looked like this:

import { styled } from '@stitches/react';

export const Box = styled('div');

Just to test the css prop.

However, when calling the component and passing the token through the css prop it did not return a text with the token color.

The question is, did I do something wrong? This is what appears in the documentation.

Answer 1

I just saw here that the problem was that the styled I was importing was not the same as the one I was exporting from createStitches

So to solve this, when you need styled you should import it straight from stitches.config.ts

Answer 2

Exactly ! This way...

// customTheme.ts
export const { styled } = createStitches({
  theme: {
    turq: 'rgba(0, 245, 196, 1)',
  }
})

// Component.ts
import { styled } from 'customTheme'

export const Box = styled('div')