그냥 리액트 nextjs와 타입스크립트용 nextjs는 약간다르다.
그냥 리액트 nextjs
yarn add styled-components_document.js
import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";
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();
}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;.babelrc
{
"presets": ["next/babel"],
"plugins": ["styled-components"]
}예시
import styled from 'styled-components';
let StyledButton = styled.button`
background : ${ props => props.bg };
color : black;
padding : 10px;
`;
function Detail(){
return (
<div>
<StyledButton bg="orange">Orange</StyledButton>
<StyledButton bg="blue">Blue</StyledButton>
</div>
)
}
타입스크립트 Nextjs
다음에 정리
https://styled-components.com/docs/advanced#nextjs
styled-components: Advanced Usage
Theming, refs, Security, Existing CSS, Tagged Template Literals, Server-Side Rendering and Style Objects
styled-components.com
반응형
'Frontend > React' 카테고리의 다른 글
| 브라우저단 에러 error - FetchError: request to http://localhost:8000/main failed, reason: connect ECONNREFUSED 127.0.0.1:8000 (0) | 2022.05.23 |
|---|---|
| Component Life cycle (0) | 2022.05.22 |
| Nextjs API basic (0) | 2022.05.21 |
| React와 Next js 이미지 경로 여러가지 방법 (0) | 2022.04.30 |
| Nextjs getServerSideProps 예시 (0) | 2022.04.08 |
