<p>TailwindCSS を使用して背景表紙を設定し、useEffect の bookId (10 桁) から色を抽出しました。色が更新され、コンポーネントは更新された色の値で再レンダリングされますが、レンダリングされたページの背景色は親 div の色のままです。 </p> <pre class="brush:php;toolbar:false;">const Colors = [ 'from-red-500', 'オレンジ 500 から', 'from- yellow-500', 'from-green-500', 'from-シアン-500', 'from-blue-500', 'from-indigo-500', 'from-violet-500', 'from-purple-500', 'from-pink-500', 】 関数 BgCover(props) { const [color, 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 スクロールバー-非表示選択-相対なし'> <div className={`bg-gradient-to-b ${color} to-black`}> <セクション className={`flex flex-col md:flex-row items-center justify-center p-4`}> {props.children} </セクション> </div> </div> ):( <p className='text-2xl'>読み込み中..</p> )} </フラグメント> ) }</pre> <p>ただし、カラー変数をカラー値 (たとえば「from-red-500」) に置き換えると、レンダリングされたページに背景色が表示されます。 </p> <p>useEffect の setColor コードを getStaticProps に置き換えてみましたが、コードの静的バージョンでは問題は解決されませんでした (カラー変数を使用する場合)。 </p> <p>ご協力いただきありがとうございます。 </p>