reactjs - Γιατί δεν μπορώ να χρησιμοποιήσω το token του stitches στο css prop;

Πιστεύω ότι η ερώτησή μου είναι απλή για όσους εργάζονται με ράμματα καθημερινά.

Ακολουθούσα την ανάρτηση του Pedro Duarte και είδα ότι υπάρχει τρόπος να δημιουργηθεί ένα αρχείο διαμόρφωσης, δηλαδή stitches.config.ts.

Έκανα αυτό, ωστόσο, όταν προσπάθησα να χρησιμοποιήσω τα tokens δεν λειτουργούσε, είχε οριστεί έτσι:

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

Μετά τη δημιουργία αυτού του token προχώρησα στο επόμενο βήμα, που ήταν να δημιουργήσω ένα component, το οποίο έμοιαζε με αυτό:

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

export const Box = styled('div');

Απλώς για να δοκιμάσω την ιδιότητα css.

Ωστόσο, όταν καλούσα το στοιχείο και περνούσα το token μέσω της ιδιότητας css, δεν επέστρεψε κείμενο με το χρώμα του token.

Η ερώτηση είναι, έκανα κάτι λάθος; Αυτό είναι που εμφανίζεται στην τεκμηρίωση.

Απάντηση #1

Ακριβώς! Με αυτόν τον τρόπο...

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

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

export const Box = styled('div')

Απάντηση #2

Μόλις είδα εδώ ότι το πρόβλημα ήταν ότι το styled που εισήγαγα δεν ήταν το ίδιο με αυτό που εξήγαγε από το createStitches

Για να λύσετε αυτό, όταν χρειάζεστε styled θα πρέπει να το εισάγετε απευθείας από stitches.config.ts