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 불러오기
참고 사이트