CODEWITHSUNDEEP
next.jsstyled-jsx
Eturcim
Eturcim

Reputation: 818

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

Next.js introduced the Image component. I would like to use it and I am currently struggling to find the way to apply style to it using styled-jsx.

Here is my attempt:

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

The classname is properly transmitted to the underlying dom element, but the style is not applied. Is there some kind of incompatibility between next.js Image component and styled-jsx?

Upvotes: 0

Views: 397

Answers (1)

Boris Traljić
Boris Traljić

Reputation: 956

You need :global() selector.

From styled-jsx documentation (One-off global selectors): "This is very useful in order to, for example, generate a global class that you can pass to 3rd-party components."

CODE:

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

Upvotes: 2

Related Questions