reactjs - چرا نمیتوانم از توکنهای stitches در ویژگی css استفاده کنم؟

من معتقدم سؤال من برای کسانی که روزانه با دوختها کار میکنند ساده است.

من پست پدرو دوآرته را دنبال میکردم و دیدم که راهی برای ایجاد یک فایل پیکربندی وجود دارد، یعنی stitches.config.ts.

من این کار را انجام دادم، با این حال، وقتی سعی کردم از توکنها استفاده کنم، کار نکرد، اینطور تعریف شده بود:

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

بعد از ایجاد این نشانه، من به مرحلهی بعدی رفتم که ایجاد یک مؤلفه بود، که به این شکل بود:

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

export const Box = styled('div');

فقط برای تست ویژگی CSS.

با این حال، هنگام فراخوانی مؤلفه و ارسال توکن از طریق ویژگی css، متنی با رنگ توکن بازگردانده نشد.

سؤال این است که آیا من کار اشتباهی انجام دادم؟ این چیزی است که در مستندات ظاهر میشود.

پاسخ شماره ۱

دقیقاً! این راه...

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

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

export const Box = styled('div')

پاسخ شماره ۲

من همینجا دیدم که مشکل این بود که styled که من وارد میکردم با آن چیزی که از createStitches صادر میکردم یکی نبود

پس برای حل این مشکل، وقتی به styled نیاز دارید، باید آن را مستقیماً از stitches.config.ts وارد کنید