const main = {
backgroundColor: "#14205E",
width: "100%",
height: "768px",
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
display: "flex",
justifyContent: "center", // not show in email
alignItems: "center", // not show in email
margin: 0
};
const container = {
backgroundColor: "rgba(10, 153, 135, 0.5)",
padding: "8px",
border: "1px solid rgba(101, 230, 214, 0.5)",
width: "100%",
maxWidth: "450px"
// marginTop: "100px"
// opacity: 0.5
};
const box = {
padding: "24px"
};
export const EmailLayout = ({
locale,
children,
preview
}: PropsWithChildren<{ preview: ReactNode; locale: string }>) => {
return (
<Html lang={locale}>
<Head />
<Preview>{preview}</Preview>
<Body style={main} className="main">
<Container style={container}>
<div style={box}>
<Container>
<Img
src={
"https://myimage.com/assets/public/new-logo.png"
}
alt="main logo"
width="250"
height="70"
/>
<Img
src={
"https://myimage.com/assets/public/padlock-logo.png"
}
alt="lock"
width="200"
height="135"
/>
</Container>
{children}
</div>
</Container>
</Body>
</Html>
);
};
After built and try to sending into email, that styles are gone and my layout stick in the top
I create a layout
I adding
justifyContent: "center"andalignItems: "center"inmainAfter built and try to sending into email, that styles are gone and my layout stick in the top
How to solve this?