Some email clients don't display background color on <Body> (including Outlook, and others) #662

magoz · 2023-04-25T18:44:04Z

Describe the Bug

The README of the<Body> component states that you can use it to set the email background color and that is supported by the most popular email clients.

But Outlook, and other clients, ignore the background color set on the <Body>.

I've realized that the <Body> component is not listed in React Email docs but is used by all the examples.

Is this a known issue? If so, how should we go around it?

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://demo.react.email/preview/codepen-challengers

To Reproduce

Send an email from the demo to an Outlook email address.

The email will not display the background color.

Expected Behavior

The background color set on is displayed by all email clients.

What's your node version? (if relevant)

No response

The text was updated successfully, but these errors were encountered:

edenstrom · 2023-04-26T10:32:41Z

For now we're using our own component for this which works great for us.

import { Body } from "@react-email/components";

export type EmailBodyHackProps = {
  children?: React.ReactNode;
  style?: React.CSSProperties;
};

export const EmailBodyHack = ({ children, style }: EmailBodyHackProps) => {
  return (
    <Body>
      <table width="100%" style={style}>
        <tbody>
          <tr style={{ width: "100%" }}>
            <td>{children}</td>
          </tr>
        </tbody>
      </table>
    </Body>
  );
};

Tested in outlook.com but not native Outlook yet.

Note: Naming is hard 😅

magoz · 2023-04-26T18:25:26Z

Perhaps <Body> should implement something like this internally? @bukinoshita

bukinoshita · 2023-05-05T15:38:46Z

Yes, let's get this fixed.

jinsley8 · 2023-05-05T16:11:25Z

For now we're using our own component for this which works great for us.

import { Body } from "@react-email/components";

export type EmailBodyHackProps = {
  children?: React.ReactNode;
  style?: React.CSSProperties;
};

export const EmailBodyHack = ({ children, style }: EmailBodyHackProps) => {
  return (
    <Body>
      <table width="100%" style={style}>
        <tbody>
          <tr style={{ width: "100%" }}>
            <td>{children}</td>
          </tr>
        </tbody>
      </table>
    </Body>
  );
};

Tested in outlook.com but not native Outlook yet.

Note: Naming is hard 😅

The Container code is fairly similar if not the same as the code you posted except it has a max-width which can be overridden:
https://github.com/resendlabs/react-email/blob/main/packages/container/src/container.tsx

I tried similar using <Container> with max-width set to none. It works great on the Gmail browser client but not on Apple Mail or Gmail iOS app.

<Body style={main}>
    // Added this next line
    <Container style={{ backgroundColor: '#0F1217', width: '100%', maxWidth: 'none' }}> 
        <Container style={container}>
            {... the rest of template code}
        </Container>
    </Container>
</Body>

ZeldOcarina · 2023-07-14T13:12:12Z

Confirming this bug on Outlook.
Trying the hack by @edenstrom.

ZeldOcarina · 2023-07-14T13:16:13Z

No luck with the hack on Outlook.. :(

rbestardpino · 2023-10-02T00:42:14Z

Faced the same issue and none of the solutions above worked for me.

What I ended up doing is also applying the styles to the html body on a style tag inside the Head component:

<Head>
    <style>
      {`
        body {
          background-color: #F2F2F2;
          margin: auto;
          padding: 32px 24px;
          font-family: sans-serif;
        }
      `}
    </style>
</Head>

Full code diff

Previously (didn't work):

import React from "react";
import {
  Body,
  Container,
  Head,
  Html,
  Img,
  Preview,
  Tailwind,
  Text,
} from "@react-email/components";

import tailwind from "@tailwind-config";

interface Props {
  children: React.ReactNode;
  previewText?: string;
}

export default function TemplateBase({ previewText, children }: Props) {
  return (
    <Html lang="en">
      <Head />
      {previewText && <Preview>{previewText}</Preview>}
      <Tailwind config={tailwind}>
        <Body className="mx-auto my-auto bg-[#F2F2F2] px-6 py-8 font-sans">
           ...
        </Body>
      </Tailwind>
    </Html>
  );
}

Currently (works):

import React from "react";
import {
  Body,
  Container,
  Head,
  Html,
  Img,
  Preview,
  Tailwind,
  Text,
} from "@react-email/components";

import tailwind from "@tailwind-config";

interface Props {
  children: React.ReactNode;
  previewText?: string;
}

export default function TemplateBase({ previewText, children }: Props) {
  return (
    <Html lang="en">
      <Head>
        <style>
          {`
            body {
              background-color: #F2F2F2;
              margin: auto;
              padding: 32px 24px;
              font-family: sans-serif;
            }
          `}
        </style>
      </Head>
      {previewText && <Preview>{previewText}</Preview>}
      <Tailwind config={tailwind}>
        <Body>
          ...
        </Body>
      </Tailwind>
    </Html>
  );
}

I had to keep both the style tag and the inline styles becase on gmail it works only with the inline styles and on outlook only with the style tag.

I tested it in both Gmail and Outlook and, although I believe does not make a difference, using both resend and AWS SES with the render method. Every combination worked

ZeldOcarina · 2023-10-02T06:02:04Z

Thanks @rbestardpino. I feel this is still an issue though as the purpose of the framework is to normalize HTML quirks between browsers etc. and needing to go through hacks to style the background is sub-optimal imo

jinsley8 · 2023-10-02T13:37:34Z

@ZeldOcarina There are limitations to some email clients that just can't be changed but I agree it would be good to at least list those limitations in docs so users are aware.

Email preview testing software like Litmus and Email on Acid start at $99/mo so most user would not have the ability to check if their emails aren't rendering correctly.

Here are email previewer services to help test your designs across clients. I haven't tried the free ones yet so I don't know how accurate they are:

Free:
https://putsmail.com/
https://inboxanalyzer.io/features
https://emailpreview.io/

Paid:
https://www.litmus.com/
https://www.emailonacid.com/
https://emailpreviewservices.com/en/features/email-design-testing
https://mailosaur.com/email-testing
https://www.sendforensics.com/features/client-previews/

timothyjoh · 2023-11-20T20:56:41Z

Other libraries like Mailing and Maizzle use https://github.com/Automattic/juice to do the automatic conversion of CSS classes to inline styles. You should adopt this.

missbruni · 2023-11-21T19:21:12Z

Do we have a fix coming for this?

endymion1818 · 2024-04-02T13:18:28Z

Chiming in here, this is a nuisance. To get around both Outlook and Gmail, and to still not ruin it for other clients, I had to specify the CSS for the background twice, and remove it from the <Body> tag.

shahneil · 2024-08-04T21:51:53Z

Any updates?

uuouter · 2024-10-20T09:09:11Z

Hi all,

If you have a black background but wondering why it doesn't work in Apple Mail in dark mode, it automatically renders it differently (I'm not sure the how's on this, but after some frustration I don't care at this point :P)

You can add

<meta name="color-scheme" content="dark" />

to force render the dark mode.

Like always, keep your users in mind.

magoz added the Type: Bug Confirmed bug label Apr 25, 2023

bukinoshita mentioned this issue May 5, 2023

Gmail renders Body background as white only #670

Closed

jorrit91 mentioned this issue Jun 6, 2023

Apple Mail iOS client shrinks email width and font sizes #671

Closed

bukinoshita added the Package: @react-email/body label Jul 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Some email clients don't display background color on <Body> (including Outlook, and others) #662

Some email clients don't display background color on <Body> (including Outlook, and others) #662

magoz commented Apr 25, 2023

edenstrom commented Apr 26, 2023 •

edited

Loading

magoz commented Apr 26, 2023

bukinoshita commented May 5, 2023

jinsley8 commented May 5, 2023 •

edited

Loading

ZeldOcarina commented Jul 14, 2023

ZeldOcarina commented Jul 14, 2023

rbestardpino commented Oct 2, 2023

ZeldOcarina commented Oct 2, 2023

jinsley8 commented Oct 2, 2023 •

edited

Loading

timothyjoh commented Nov 20, 2023

missbruni commented Nov 21, 2023

endymion1818 commented Apr 2, 2024

shahneil commented Aug 4, 2024

uuouter commented Oct 20, 2024

Some email clients don't display background color on <Body> (including Outlook, and others) #662

Some email clients don't display background color on <Body> (including Outlook, and others) #662

Comments

magoz commented Apr 25, 2023

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

edenstrom commented Apr 26, 2023 • edited Loading

magoz commented Apr 26, 2023

bukinoshita commented May 5, 2023

jinsley8 commented May 5, 2023 • edited Loading

ZeldOcarina commented Jul 14, 2023

ZeldOcarina commented Jul 14, 2023

rbestardpino commented Oct 2, 2023

Full code diff

ZeldOcarina commented Oct 2, 2023

jinsley8 commented Oct 2, 2023 • edited Loading

timothyjoh commented Nov 20, 2023

missbruni commented Nov 21, 2023

endymion1818 commented Apr 2, 2024

shahneil commented Aug 4, 2024

uuouter commented Oct 20, 2024

edenstrom commented Apr 26, 2023 •

edited

Loading

jinsley8 commented May 5, 2023 •

edited

Loading

jinsley8 commented Oct 2, 2023 •

edited

Loading