@imwebme/clay-stylesheet NPM

@imwebme/clay-stylesheet

설치

npm install @imwebme/clay-stylesheet
yarn add @imwebme/clay-stylesheet
pnpm add @imwebme/clay-stylesheet

가이드

주요 렌더링 경로에 배치합니다.

SPA 의 경우 -> index.tsx Next.js의 경우 (page dir) -> _app.tsx Next.js의 경우 (app dir) -> app/layout.tsx

import "@imwebme/clay-stylesheet";

루트 엘리먼트() 초기화

clay 에서 제공하는 속성은 사용하기 전에 명시적인 초기화가 필요합니다.

페이지 루트 요소에 data-clay-theme 어트리뷰트를 지정합니다.

예시 (HTML, SPA react)

<html lang="ko" data-clay-theme="light-only">
  <head>
    <meta name="color-scheme" content="light" />
  </head>

  <body>
    <!-- your script -->
  </body>
</html>

예시 (Nextjs > page dir)

<Html lang="ko" data-clay-theme="light-only">
  <Head>
    <meta name="color-scheme" content="light" />
  </Head>

  <body>
    <Main />
    <NextScript />
  </body>
</Html>

예시 (Nextjs > app dir)

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" data-clay-theme="light-only">
      <head>
        <meta name="color-scheme" content="light" />
      </head>

      <body>{children}</body>
    </html>
  );
}

@everything-registry/sub-chunk-461

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago