<p>Menggunakan TailwindCSS untuk menetapkan kulit latar belakang, saya mengekstrak warna daripada bookId (10 digit) dalam useEffect. Warna dikemas kini dan komponen dipaparkan semula dengan nilai warna yang dikemas kini, tetapi warna latar belakang halaman yang diberikan masih sama dengan warna div induknya. </p> <pre class="brush:php;toolbar:false;">const color = [ 'dari-merah-500', 'dari-oren-500', 'dari-kuning-500', 'dari-hijau-500', 'dari-cyan-500', 'dari-biru-500', 'dari-indigo-500', 'dari-violet-500', 'dari-ungu-500', 'dari-merah jambu-500', ] fungsi BgCover(props) { const [warna, setColor] = useState(null) penghala const = useRouter() useEffect(() => { const id = router.query.bookId const index = id.slice(-1) //Ekstrak indeks daripada bookId const bgColor = warna[indeks] setColor(bgColor) }, []) kembali ( <Pecahan> {warna ? ( <div className='flex-grow scrollbar-hide select-none relative'> <div className={`bg-gradient-to-b ${color} to-black`}> <bahagian className={`flex flex-col md:flex-row items-center justify-center p-4`}> {props.children} </section> </div> </div> ) : ( <p className='text-2xl'>Memuatkan..</p> )} </Fragment> ) }</pre> <p>Walau bagaimanapun, apabila saya menggantikan pembolehubah warna dengan nilai warna (katakan 'from-red-500'), warna latar belakang kelihatan dalam halaman yang diberikan. </p> <p>Saya juga cuba menggantikan kod setColor dalam useEffect dengan getStaticProps, tetapi versi statik kod itu tidak menyelesaikan masalah (apabila menggunakan pembolehubah warna). </p> <p>Terima kasih atas sebarang bantuan. </p>

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'from-red-500',
    'from-orange-500',
    'from-yellow-500',
    'from-green-500',
    'from-cyan-500',
    'from-blue-500',
    'from-indigo-500',
    'from-violet-500',
    'from-purple-500',
    'from-pink-500',
  ]
  // ...
}

<div className="hidden from-red-500"></div>