Next.js: Enable styling of next/image outer wrapper

[g-elwell]

Styles added to the Image component get applied directly to the inner img element. However some of the most common styles you would usually apply to a regular img are position related (eg. width, margin, etc).

Because the img element in this component is absolutely positioned, these styles become useless.

There is no method to work around this other than placing your own additional wrapper outside the Image component and using CSS selectors to target the element you want to style as it's immediate child, eg:

// jsx
<div className="my-wrapper">
  <Image ... />
</div>

// outputted html
<div class="my-wrapper">
  <div style="max-width:100%;width:1200px">
    <div style="position:relative;padding-bottom:100%">
      <img style="visibility: visible; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;" ... >
    </div>
  </div>
</div>

// css
.my-wrapper > div {
  margin-right: 20px;
}

Suggested Fix: Apply component classnames and styles to the outer div instead of the img element

If styles applied to the Image component were applied to the outer div instead, you'd be able to use margin and padding without the need of an additional wrapper. This would be closer to a drop-in replacement for img for most people.

It would still be possible to style the img element directly as a descendant so you don't lose this functionality, eg:

// jsx
<Image className="my-image" ... />

// css
.my-image {
  margin-right: 20px;
}
.my-image img {
    border-radius: 10px;
}

[uinstinct]

Yeah, this is sure of a trouble.
Neither classNames nor styles are passed down to the NextImage component.

[daneden]

+1! There also seems to be a lack of support for <style jsx> className styles passed to next/image:

import Image from "next/image"

export default function Example() {
  return (
    <>
      {/* This Image's inner `img` tag gets `class="image"` but not the additional/transformed jsx class name(s) */}
      <Image src="/image.jpg" className="image" width={128} height={128} />
      <style jsx>{`
        .image {
          width: 64px;
        }
      `}</style>
    </>
  )
}

Failing better support for styles or classNames, better documentation for how passed className is handled and/or recommendations for styling next/image (i.e. styling wrappers or using :global(img)) in Next.js documentation would be great.

[lachlanjc]

+1 The nested divs have caused a number of layout issues on https://scrapbook.hackclub.com (https://github.com/hackclub/summer-scrapbook/issues/115) that required ugly CSS (> div:first-child etc) to work around (e.g. styling CSS Grid children works differently from an image inside a div), & we’re still getting to the bottom of some (https://github.com/hackclub/summer-scrapbook/issues/117). Would love more flexibility here—I’m fine handling the sizing myself & would rather skip Next’s divs entirely in some cases.

[g-elwell]

@lachlanjc just FYI the overflow/layout issue seems to have been fixed in canary, so it's coming! I was having similar issues with next/image inside a flexbox child.

[lachlanjc]

Thanks so much @g-elwell! Just knocked out that issue, appreciate the tip.