如何使用 jsx 样式将样式应用于图像组件

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 图像组件和 styled-jsx 之间是否存在某种不兼容？

Answer 1

您需要 :global() 选择器。

来自 styled-jsx 文档 (One-off global selectors)：“这非常有用，例如，生成一个可以传递给的全局 class第 3 方组件。"

代码：

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

如何使用 jsx 样式将样式应用于图像组件

How to apply style using jsx-styled to an Image component

next.js

styled-jsx