dextinity-mail-react

Place MjmlColumn components inside an MjmlSection with disableResponsiveBehavior set, which wraps columns in an MjmlGroup so widths are written inline. Create gaps with padding on inner column edges, and write mobile stacking rules yourself via registerStyles.

Use @dextinity/mail-react, which wraps MJML in themed React components. Define a theme with createTheme, wrap content in MjmlMailRoot, and compose sections, columns, and text components that compile to cross-client-compatible HTML.

No, classic Outlook ignores border-radius entirely. MjmlImage and HtmlImage handle rounded images automatically when given pixel dimensions, but buttons and containers need a hand-written VML v:roundrect inside a conditional comment with fixed pixel dimensions.

MJML writes column widths in a min-width media query, which clients like GMX and Web.de drop, causing columns to stack. Set disableResponsiveBehavior on every multi-column section so MJML writes widths inline via an MjmlGroup.

Call createRichTextBlock once at module level with blockTypes mapping draft-js block types to theme text variants. It returns MjmlRichTextBlock for MJML layouts and HtmlRichTextBlock for raw HTML contexts, both accepting the CMS block data as a prop.

Outlook calculates line-height with its own rules, causing unexpected spacing. Every manual line-height on raw HTML inside ending tags must be paired with the inline style mso-line-height-rule: exactly. HtmlText and built-in components handle this automatically.