<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>