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