function Button ({className}) {
return (<Container className={className}>)</Container>
}
const StyledButton = styled(Button)`
margin-top: 30px
`;;
function ButtonContainer () {
return <StyledButton></StyledButton>
}
JavaScript
복사
Nextjs 에서 위와 같이 하면 에러 발생.
첫 페이지는 SSR로 작동하며 이후 CSR로 화면을 렌더링하게 되는데, 이때 서버에서 받은 해시+클래스명과 이후 클라이언트에서 작동하는 해시+클래스 명이 달라지면서 스타일을 불러올수 없는 문제가 발생한다.