diff --git a/packages/container/src/container.tsx b/packages/container/src/container.tsx index 1a5b4d2261..d2e1f9c5bd 100644 --- a/packages/container/src/container.tsx +++ b/packages/container/src/container.tsx @@ -3,7 +3,25 @@ import * as React from 'react'; export type ContainerProps = Readonly>; export const Container = React.forwardRef( - ({ children, style, ...props }, ref) => { + ({ children, style = {}, ...props }, ref) => { + // Destructure padding to improve compatibility with Klavyio and Outlook. + const { + padding, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + ...tableStyle + } = style; + + const tdStyle = { + padding, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + }; + return ( ( cellSpacing="0" ref={ref} role="presentation" - style={{ maxWidth: '37.5em', ...style }} + style={{ maxWidth: '37.5em', ...tableStyle }} > - +
{children}{children}
diff --git a/packages/section/src/section.tsx b/packages/section/src/section.tsx index 20c494e2a8..e59aa533bd 100644 --- a/packages/section/src/section.tsx +++ b/packages/section/src/section.tsx @@ -3,7 +3,25 @@ import * as React from 'react'; export type SectionProps = Readonly>; export const Section = React.forwardRef( - ({ children, style, ...props }, ref) => { + ({ children, style = {}, ...props }, ref) => { + // Destructure padding to improve compatibility with Klavyio and Outlook. + const { + padding, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + ...tableStyle + } = style; + + const tdStyle = { + padding, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + }; + return ( ( role="presentation" {...props} ref={ref} - style={style} + style={tableStyle} > - +
{children}{children}