fix(next/image): ignore typography prose styles (#20580)

This fixes `next/image` to properly ignore inherited styles applied to the `img` tag by a parent element.

Image styling should **always** be done by a wrapper element—not to the image itself!

---

Fixes #19817
Fixes #19964

packages/next/client/image.tsx

@@ -379,7 +379,13 @@ export default function Image({
         <div style={sizerStyle}>
           {sizerSvg ? (
             <img
-              style={{ maxWidth: '100%', display: 'block' }}
+              style={{
+                maxWidth: '100%',
+                display: 'block',
+                margin: 0,
+                border: 'none',
+                padding: 0,
+              }}
               alt=""
               aria-hidden={true}
               role="presentation"

test/integration/image-component/default/pages/prose.js

@@ -0,0 +1,15 @@
+import Image from 'next/image'
+import React from 'react'
+import * as styles from './prose.module.css'
+
+const Page = () => {
+  return (
+    <div className={styles.prose}>
+      <p>Hello World</p>
+      <Image id="prose-image" src="/test.jpg" width="400" height="400"></Image>
+      <p id="stubtext">This is the rotated page</p>
+    </div>
+  )
+}
+
+export default Page

test/integration/image-component/default/pages/prose.module.css

@@ -0,0 +1,5 @@
+/* @tailwindcss/typography does this */
+.prose img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}

test/integration/image-component/default/test/index.test.js

@@ -477,6 +477,38 @@ function runTests(mode) {
     }
   })
 
+  it('should correctly ignore prose styles', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/prose')
+
+      const id = 'prose-image'
+
+      // Wait for image to load:
+      await check(async () => {
+        const result = await browser.eval(
+          `document.getElementById(${JSON.stringify(id)}).naturalWidth`
+        )
+
+        if (result < 1) {
+          throw new Error('Image not ready')
+        }
+
+        return 'result-correct'
+      }, /result-correct/)
+
+      await waitFor(1000)
+
+      const computedWidth = await getComputed(browser, id, 'width')
+      const computedHeight = await getComputed(browser, id, 'height')
+      expect(getRatio(computedWidth, computedHeight)).toBeCloseTo(1, 1)
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+
   // Tests that use the `unsized` attribute:
   if (mode !== 'dev') {
     it('should correctly rotate image', async () => {