👉🏻Next 13.5v 에서 GlobalStyle 및 theme style 적용하기
안녕하세요 트리플랩입니다 :)
오늘은 NextJS 13에서 GlobalStyle 및 theme style 적용하는 방법에 대해서 이야기를 해보겠습니다.
일단 공식문에서 styled-components.tsx을 설정하는 방법을 참고했습니다.(하단 링크 참고)
// src/lib/styled-components.tsx
'use client'
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
import { ThemeProvider } from 'styled-components'; 👈🏻
import GlobalStyles from '@/styles/GlobalStyle'; 👈🏻
import theme from '@/styles/theme'; 👈🏻
export default function StyledComponentsRegistry({
children,
}: {
children: React.ReactNode
}) {
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}</>
})
if (typeof window !== 'undefined') return <>{children}</>
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
<ThemeProvider theme={theme}> 👈🏻
<GlobalStyles /> 👈🏻
{children}
</ThemeProvider> 👈🏻
</StyleSheetManager>
)
}
이렇게 styled-components.tsx 파일에 GlobalStyle와, theme style들을 불러와서 Provider식으로 감싸줬습니다.
그리고 사용하는 방법은 다음고 같이 컴포넌트 최상단에서 body하단에 삽입했습니다.
// src/app/layout.tsx
import type { Metadata } from 'next';
import StyledComponentsRegistry from '@/lib/styled-components';
import Header from '@/components/Header';
import AuthContext from '@/context/AuthContext';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ko">
<body>
<StyledComponentsRegistry> 👈🏻
<AuthContext>
<Header />
<main>{children}</main>
</AuthContext>
</StyledComponentsRegistry> 👈🏻
</body>
</html>
)
}
👉🏻 사용하는 방법
이제 import styled from "styled-components"를 사용해서 전역으로 설정한 theme를 사용해 봅시다.
"use client";
import styled from "styled-components";
export default function Home() {
return (
<SkeletonInner>
메인페이지 입니다.
</SkeletonInner>
)
}
const SkeletonInner = styled.div`
${props => { 👈🏻
const { theme } = props;
return `
color: ${theme.colors?.orangeffa};
font-size: 22px;
`
}} 👈🏻
`;
👉🏻참고 링크
https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
Styling: CSS-in-JS | Next.js
Warning: CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming requires library authors to support the latest version of React,
nextjs.org
