Next.js에서 TailwindCSS 스타일을 적용할 때 스타일이 렌더링되지 않는 문제가 발생합니다.
<p>TailwindCSS를 사용하여 배경 표지를 설정하고 useEffect의 bookId(10자리)에서 색상을 추출했습니다. 색상이 업데이트되고 구성요소가 업데이트된 색상 값으로 다시 렌더링되지만 렌더링된 페이지의 배경색은 여전히 상위 div의 색상과 동일합니다. </p>
<pre class="brush:php;toolbar:false;">const colors = [
'from-red-500',
'오렌지-500',
'프롬-옐로우-500',
'from-green-500',
'from-시안-500',
'프롬-블루-500',
'from-indigo-500',
'from-바이올렛-500',
'from-purple-500',
'프롬-핑크-500',
]
함수 BgCover(props) {
const [색상, setColor] = useState(null)
const 라우터 = useRouter()
useEffect(() => {
const id = router.query.bookId
const index = id.slice(-1) //bookId에서 색인 추출
const bgColor = 색상[색인]
setColor(bgColor)
}, [])
반품 (
<조각>
{색상 ? (
<div className='flex-grow 스크롤바-hide select-none 상대'>
<div className={`bg-gradient-to-b ${color} to-black`}>
<섹션
className={`flex flex-col md:flex-row items-center justify-center p-4`}>
{소품.어린이}
</섹션>
</div>
</div>
) : (
<p className='text-2xl'>로드 중..</p>
)}
</조각>
)
}</pre>
<p>그러나 색상 변수를 색상 값(예: 'from-red-500')으로 바꾸면 렌더링된 페이지에 배경색이 표시됩니다. </p>
<p>또한 useEffect의 setColor 코드를 getStaticProps로 바꾸려고 시도했지만 코드의 정적 버전에서는 문제가 해결되지 않았습니다(color 변수를 사용할 때). </p>
<p>도움을 주셔서 감사합니다. </p>