next.js - 如何使用 jsx-styled 将样式应用于 Image 组件

Question

Next.js 引入了 Image 组件。我想使用它，我目前正在努力寻找使用 styled-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>
    );
}

类名已正确传输到底层 dom 元素，但未应用样式。next.js Image 组件和 styled-jsx 之间是否存在某种不兼容？

Answer 1

你需要:global()选择器。

来自styled-jsx文档（一次性全局选择器）：“这非常有用，例如，生成一个可以传递给 3rd-party 组件的全局类。 ”

代码：

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>
    );
}