Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next js Image Component Styled bug

See original GitHub issue

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

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

Issue Analytics

State:
Created 2 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

Andaristcommented, Apr 3, 2021

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.

1reaction

Andaristcommented, Apr 3, 2021

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

Top Results From Across the Web

Image component causes unexpected behavior with Styled ...

This issue still persists. Next.js is creating additional elements and adds inline styles on them. Totally unusable in this context.

next/image - Next.js

This section describes the most commonly-used properties of the Image component. Find details about more rarely-used properties in the Advanced Props section.

Responsive fix for the Next.js Image component

There is an easy fix to this problem, you only have to set a wrapper around the Image component to give a bit...

How to styled image in next.js - Stack Overflow

How can I style the image to apply postion:abloute to the image component? What to apply more stylish in image component (this image...

Next.js image optimization techniques | Uploadcare Blog

Image component limitations · Hard to adjust default CSS styles · Conflicts with flexbox · Increased server load and disk space utilization.