The expression prop or the mso prop must be defined, but not both.
Conditional
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 `Conditional` component when it fits the email's content and layout. Use mainly inside `Head` for Outlook/MSO-only meta, styles, or VML helpers. Set either `mso` or `expression`, never both, and keep the conditional fragment minimal. Reference the component docs at https://jsx.email/docs/components/conditional.
Use HTML conditional comments effortlessly
pnpm
aube
bun
npm
yarn
pnpm add jsx-emailUsage
Add the component to your email template. Include styles where needed.
import { Conditional, Head } from 'jsx-email';
const Email = () => {
return (
<Head>
<Conditional mso={true}>
<meta content="batman" />
</Conditional>
</Head>
);
};Component Props
interface ConditionalProps {
children?: React.ReactNode;
expression?: string;
mso?: boolean;
}Info
Props
expression?: string;If provided, the string will be used as the conditional expression within the HTML comment. e.g. a value of lt ie 10 would result in a conditional comment block starting with ....