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

问题描述

我是 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,.5);
                }
                .articleItem{
                    color: red;
                }
            `}</style>
        </>
    )
}
    
export default JsxDc;

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）