1. styled components 를 설치해준다
yarn add styled-components
yarn add babel-plugin-styled-components2. 설치 완료 후 root 디렉터리에 .babelrc 파일 설정 추가
{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
{
"ssr": true
}
]
]
}3. pages 폴더 하위에 _document.js 파일을 추가
import React, { ReactElement } from "react";
import Document, {
DocumentInitialProps,
DocumentContext,
Html,
Main,
NextScript,
Head,
} from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(
ctx: DocumentContext
): Promise<DocumentInitialProps> {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>,
],
};
} finally {
sheet.seal();
}
}
render(): ReactElement {
return (
<Html lang="ko">
<Head></Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
이제 프로젝트에서 styled-component 를 사용하여 아래의 예시 코드처럼 div 컴포넌트를 만들 수 있다.
styled.<tag> : tag 부분에 a, span 등 css 태그를 넣어 styled-component를 사용하면 된다.
import styled from "styled-components";
export const BaseDiv = styled.div`
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 60%;
font-size: 30px;
`