为了使用TailwindCSS设置背景封面，我从useEffect中的bookId（10位数）中提取了颜色。颜色会更新，组件会使用更新后的颜色值重新呈现，但呈现页面上的背景颜色仍然与其父div相同。

const colors = [
    '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',
]

function BgCover(props) {
    const [color, setColor] = useState(null)
    const router = useRouter()

    useEffect(() => {
        const id = router.query.bookId
        const index = id.slice(-1) //extract the index from bookId
        const bgColor = colors[index]
        setColor(bgColor)
    }, [])

    return (
        <Fragment>
            {color ? (
                <div className='flex-grow scrollbar-hide select-none relative'>
                    <div className={`bg-gradient-to-b ${color} to-black`}>
                        <section
                            className={`flex flex-col md:flex-row items-center justify-center p-4`}>
                            {props.children}
                        </section>
                    </div>
                </div>
            ) : (
                <p className='text-2xl'>Loading..</p>
            )}
        </Fragment>
    )
}

但是当我用一个颜色值替换颜色变量（比如说'from-red-500'）时，背景色在呈现的页面中是可见的。
我也尝试过用getStaticProps替换useEffect中的setColor代码，但是静态版本的代码无法解决这个问题（当使用颜色变量时）。
谢谢你的帮助。