Emotion: Next js Image Component Styled bug

[DoGukKim]

When I wrapping next js component(Link, Image,.. etc), style is not working.

import Image from "next/image";
const CustomImage = styled(Image)`
...style
`;

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[DoGukKim]

https://codesandbox.io/s/youthful-night-496hi?file=/pages/index.js
this is my codesandbox! sorry :)

Link component or Image component style not working !

[Andarist]

I have not tested this but I believe it should be:

const CustomLink = styled('a')`
  border: 1px soild red;
  text-decoreation: none;
`;

;<Link><CustomLink href="/about" passHref/></Link>

const CustomImage = styled(Image)`
  border: 1px solid red;
`;

The Link accepts your <a/> a child - it's just how its API work. And you had a typo in your Image - it should be solid instead of soild

[DoGukKim]

i fixed 'solid' CustomImage = styled(Image)border: 1px solid red;;
but still not work !! u must test it!

[DoGukKim]

Plz help! @Andarist

[Andarist]

Your codesandbox doesn't even use next/image (nor next/link) right now - so I have no idea what's broken according to you as the issue is not reproduced there at all.

[DoGukKim]

Your codesandbox doesn't even use next/image (nor next/link) right now - so I have no idea what's broken according to you as the issue is not reproduced there at all.

Ok thanks for reply! Have a good day!

[imadatyatalah]

@DoGukKim I've taked a look at your code sandbox and i saw that you're using <img /> tag not Next.js Image component.
Take a look at that code example

[Andarist]

A runnable repro case has not been provided. I'm going to close this issue for housekeeping purposes as I must assume this is not a problem anymore. If you manage to create a repro case then please open a new issue with the repro case attached to it.