Next.js 如何将jsx样式应用于图像组件

js引入了图像组件。我想使用它，我目前正在努力找到使用样式化jsx将样式应用于它的方法

以下是我的尝试：

export default function MyComponent({description}) {
    return (
        <div>
            <Image src={concept.icon.url} className="icon" width={40} height={40}></Image>
            <div>{description}</div>
            <style jsx>{`               
                .icon:hover {
                    cursor: pointer;
                }
           `}</style>
        </div>
    );
}

导出默认函数MyComponent（{description}）{
返回(
{说明}
{`               
.图标：悬停{
光标：指针；
}
`}
);
}

类名被正确地传输到底层dom元素，但是样式没有被应用。 next.js图像组件和样式化jsx之间是否存在某种不兼容？

您需要

：global（）

选择器

从

styled jsx

documentation（）：“这非常有用，例如，可以生成一个可以传递给第三方组件的全局类。”

代码：

export default function MyComponent({description}) {
    return (
        <div>
            <Image src={concept.icon.url} className="icon" width={40} height={40}></Image>
            <div>{description}</div>
            <style jsx>{`               
                div :global(.icon:hover) {
                    cursor: pointer;
                }
           `}</style>
        </div>
    );
}

导出默认函数MyComponent（{description}）{
返回(
{说明}
{`               
div:global（.icon:hover）{
光标：指针；
}
`}
);
}

您是否尝试将样式放入图像组件中。