Next.js wprowadziły komponent obrazu. Chciałbym go użyć i obecnie brzęk, aby znaleźć sposób zastosowania stylu do niego za pomocą stylizacji-jsx.

Oto moja próba:

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

Nazwa klasy jest prawidłowo przesyłana do podstawowego elementu Dom, ale styl nie jest stosowany. Czy istnieje jakiś niezgodność między komponentem obrazu Next.js i stylizacji-JSX?

0
Eturcim 20 listopad 2020, 23:58

1 odpowiedź

Najlepsza odpowiedź

Potrzebujesz selektora {x0}}.

Z dokumentacji styled-jsx ( jednorazowe globalne selektory ): " jest to bardzo przydatne, na przykład, generuje globalną klasę, którą można przejść do składników 3RD-party. "

KOD:

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>
    );
}
1
Boris Traljić 21 listopad 2020, 12:11