Next Image not taking class properties

by

Before Next.js 12.2

Styling the next/image component’s margins this way doesn’t work in older Next.js versions. See relevant GitHub discussion for more details.

Internally to the next/image component, the <img> element and the elements that wrap it have inline styles that override certain values passed through className.

As a workaround, you can add a wrapper element and apply the margin styling to it instead.

<div className="mt-3">
    <Image
        data-testid="close-icon"
        src="/CloseIcon.svg"
        alt="Close Nav Bar"
        height="24"
        width="24"
    />
</div>

From Next.js 12.2

You can use the next/future/image component instead. This new component renders a single <img> element without any additional wrappers by default, and is no longer constrained by the wrapper’s styles override.

You can enable next/future/image in next.config.js.

module.exports = {
    experimental: {
        images: {
            allowFutureImage: true
        }
    }
}

From Next.js 13

The next/future/image component has been converted to next/image. Like next/future/image, this component renders a single <img> element and can be styled directly with className/styles.

More Related Contents:

  1. Dynamically build classnames in TailwindCss
  2. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  3. Warning: Text content did not match. Server: “I’m out” Client: “I’m in” div
  4. How to access files uploaded to the public folder in Next.js?
  5. Can’t import SVG into Next.js
  6. How to use template literals in tailwindcss to change classes dynamically?
  7. NextJS environment variables aren’t working
  8. Next.js – Error: only absolute urls are supported
  9. Target Active Link when the route is active in Next.js
  10. Nextjs: Unable to load images from static folder
  11. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  12. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  13. How to setup i18n translated URL routes in Next.js?
  14. NextJs CORS issue
  15. How does the revalidate process in Incremental Static Regeneration work?
  16. How to type a page component with props in Next.js?
  17. Conditionally set background color in React component with Tailwind CSS
  18. How to hash CSS class names in Nextjs?
  19. Persistent navigation in a NextJs _app
  20. How to dynamically import non-React client side libraries in Next.js?
  21. React and Tailwind CSS: dynamically generated classes are not being applied
  22. What is the best way to have a fallback image in NextJS?
  23. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  24. Loading Screen on Next.js page transition
  25. Next.js router is returning query parameters as undefined on first render?
  26. How to detect window size in Next.js SSR using react hook?
  27. Unable to load images from static folder
  28. Get URL pathname in nextjs
  29. How to handle login failed error in NextAuth.js?
  30. How to implement pagination in React

Leave a Comment