fix(body): yahoo and AOL not keeping background colors for body (#2325)

gabrielmfern · web-flow · commit 00aa80552b40 · 2025-07-31T08:38:31.000-03:00
diff --git a/.changeset/fair-regions-cheat.md b/.changeset/fair-regions-cheat.md
@@ -0,0 +1,7 @@
+---
+"@react-email/components": minor
+---
+
+body: apply all styles of the body to an inner table cell for them to work on Yahoo and AOL
+
+
diff --git a/.changeset/tame-impalas-arrive.md b/.changeset/tame-impalas-arrive.md
@@ -0,0 +1,5 @@
+---
+"@react-email/body": minor
+---
+
+apply all styles of the body to an inner table cell for them to work on Yahoo and AOL
diff --git a/packages/body/src/__snapshots__/body.spec.tsx.snap b/packages/body/src/__snapshots__/body.spec.tsx.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Body> component > renders correctly 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body>Lorem ipsum<!--/$--></body>"`;
+exports[`<Body> component > renders correctly 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td>Lorem ipsum</td></tr></tbody></table><!--/$--></body>"`;
diff --git a/packages/body/src/body.tsx b/packages/body/src/body.tsx
@@ -5,8 +5,34 @@ export type BodyProps = Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>>;
 export const Body = React.forwardRef<HTMLBodyElement, BodyProps>(
   ({ children, style, ...props }, ref) => {
     return (
-      <body {...props} ref={ref} style={style}>
-        {children}
+      <body
+        {...props}
+        style={{
+          background: style?.background,
+          backgroundColor: style?.backgroundColor,
+        }}
+        ref={ref}
+      >
+        <table
+          border={0}
+          width="100%"
+          cellPadding="0"
+          cellSpacing="0"
+          role="presentation"
+          align="center"
+        >
+          <tbody>
+            <tr>
+              {/*
+                Yahoo and AOL remove all styles of the body element while converting it to a div,
+                so we need to apply them to to an inner cell.
+
+                See https://github.com/resend/react-email/issues/662.
+              */}
+              <td style={style}>{children}</td>
+            </tr>
+          </tbody>
+        </table>
       </body>
     );
   },
diff --git a/packages/preview-server/src/utils/__snapshots__/get-email-component.spec.ts.snap b/packages/preview-server/src/utils/__snapshots__/get-email-component.spec.ts.snap
diff --git a/packages/react-email/src/commands/testing/__snapshots__/export.spec.ts.snap b/packages/react-email/src/commands/testing/__snapshots__/export.spec.ts.snap

-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
 +---
 +"@react-email/components": minor
 +---
++
 +body: apply all styles of the body to an inner table cell for them to work on Yahoo and AOL
++
++
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html`
`2`	`2`
`3`		-exports[`<Body> component > renders correctly 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body>Lorem ipsum<!--/$--></body>"`;
	`3`	+exports[`<Body> component > renders correctly 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td>Lorem ipsum</td></tr></tbody></table><!--/$--></body>"`;