reactjs - Next.js jsx 样式类未应用于动态内容

Question

我是 Next.js 的初学者并做出反应，我正在尝试使用它<style jsx>来设置页面样式。它在大多数情况下都有效，但是当我动态生成内容时，不应用 className 样式。由于我对术语还不熟悉，所以很难用文字来解释，因此我将尝试通过示例进行解释（尽量使其简单）。这是我的页面内容：

import React from 'react';
    
const articles = ["dogs", "cats", "mice"]
    
function JsxDc() {
    const articleJsx = articles.map((art, idx) => (
        <li className="articleItem" key={idx}>{art} </li>
    ));
    
    return (
        <>
            <div className="pageCont">
                <h1>Hello World</h1>
                <ul>
                    {articleJsx}
                </ul>
            </div>
            <style jsx>{`
                .pageCont {
                    color: rgba(100, 100, 100, .5);
                }
                .articleItem{
                    color: red;
                }
            `}</style>
        </>
    )
}
    
export default JsxDc;

这是我在浏览器中看到的：

我希望看到以红色显示的文章列表项，但事实并非如此。我错过了什么 - 如何使这项工作？谢谢！