[Next] styled-components를 위한 _document 및 .babelrc 설정

쿼카쿼카·2022년 10월 19일
0

React / Next

목록 보기
14/34

styled-components

  • Next.js에서 styled-components를 쓰는 방법은 리액트와 비슷함
  • 초기 설정에서 SSR에서 오류가 없도록 _document와 .babelrc 설정이 필요

npm 설치

npm i styled-components
npm i -D babel-plugin-styled-components
  • npm 설치 시 babel-plugin-styled-components는 -D 넣어주기

최상단에 .babelrc 파일 생성

{
  "presets": ["next/babel"],
  "plugins": [["styled-components" ,{"ssr": true}]],
}
  • .babelrc 파일에 위 내용 작성하여 플러그인 활성화

page폴더에 _document.js 파일 생성

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {

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

가변 스타일링(props, css)

import React from "react";
import styled, { css } from "styled-components";

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  ${(props) =>
    props.primary &&
    css`
      color: white;
      background: navy;
      border-color: navy;
    `}
`;

function Button({ children, ...props }) {
  return <StyledButton {...props}>{children}</StyledButton>;
}
  • {css}를 import하여 props에 따라 다른 css 적용 가능
  • ${(props) => props.xxx && css 형식으로 props 불러오기

참고 사이트

profile
쿼카에요

0개의 댓글