Though the Container component wraps a <table> element, it has a specific use-case and does not support setting cellPadding or cellSpacing. If attempting to use Container as a table, please consider using a Section component or a combination of Row and Column.
Container
Use JSX email to build production-ready email templates with React and TypeScript. Prefer JSX email components and helpers from `jsx-email` for email-client compatibility. Use `render` to generate HTML strings for providers like Resend, Postmark, SendGrid, Nodemailer, AWS SES, Loops, or Plunk, and use the CLI preview/check/build workflow while developing. Favor simple, standards-compliant email markup, account for inconsistent email client CSS support, use the `Tailwind` component when utility styling is helpful, and run `email check` before sending when compatibility matters. For complete agent-readable documentation, fetch https://jsx.email/llms-full.txt before implementing. Implement or refactor with the `Container` component when it fits the email's content and layout. Use to center and constrain the email body or major content blocks. Set email-friendly widths and place `Section`, `Row`, or CTA content inside it. Reference the component docs at https://jsx.email/docs/components/container.
Horizontally center child components and content
pnpm
aube
bun
npm
yarn
pnpm add jsx-emailUsage
Add the component to your email template. Include styles where needed.
import { Button, Container } from 'jsx-email';
const Email = () => {
return (
<Container>
<Button href="https://example.com" style={{ color: '#61dafb' }}>
Click me
</Button>
</Container>
);
};Info
Component Props
disableDefaultStyle?: boolean;If true, instructs the component not to add default style properties to the component. This can be useful when attempting to override default styles with Tailwind or class names.
Tips
This component also expresses all of the Common Component Props for ComponentProps<'table'> except for cellPadding and cellSpacing.