Open
Description
Describe the Bug
Something as simple as:
<Container
style={{
paddingLeft: 16,
paddingRight: 16,
}}
>won't work in Klavyio (after export) because it generates
<table>
<tbody>
<tr style={{ width: '100%' }}>
<td>{children}</td>
</tr>
</tbody>
</table>table can't have padding (in Klavyio), but td can!
So ideally, to fix this, you could destructure Container (and other components) into something like:
import * as React from "react";
export type ContainerProps = Readonly<React.ComponentPropsWithoutRef<"table">>;
export const Container = React.forwardRef<HTMLTableElement, ContainerProps>(
(
{
children,
style = {},
...props
},
ref
) => {
const {
padding,
paddingTop,
paddingRight,
paddingBottom,
paddingLeft,
...restStyle
} = style;
const tdStyle = {
padding,
paddingTop,
paddingRight,
paddingBottom,
paddingLeft,
};
return (
<table
align="center"
width="100%"
{...props}
border={0}
cellPadding="0"
cellSpacing="0"
ref={ref}
role="presentation"
style={{ maxWidth: "37.5em", ...restStyle }}
>
<tbody>
<tr style={{ width: "100%" }}>
<td style={tdStyle}>{children}</td>
</tr>
</tbody>
</table>
);
}
);
Container.displayName = "Container";The reason according to gemini is old outlook, but Klavyio doesn't render in their preview neither on sent email (even on modern clients):
If you agree it is a problem, I can send a PR to all components that use padding so they use in td instead of table. This would make my life much easier (otherwise I'll need to fork resend and modify locally).
Which package is affected (leave empty if unsure)
@react-email/container