Concepts
MJMLStyle
A Svelte component that inlines CSS styles into MJML elements by class name.
Usage
<script lang="ts">
import { MJMLStyle } from '@repo/notifications'
</script>
<mjml>
<mj-head>
<MJMLStyle class="heading">color: #333; font-size: 24px;</MJMLStyle>
<MJMLStyle class="body-text">color: #666; line-height: 1.5;</MJMLStyle>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text css-class="heading">Title</mj-text>
<mj-text css-class="body-text">Content here.</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>How it works
MJMLStyle renders an <mj-style inline="inline"> block scoped to the given class. MJML then inlines those styles directly onto any element with the matching css-class attribute during HTML conversion. This ensures styles survive email client sanitization.
Props
| Prop | Type | Description |
|---|---|---|
class | string | CSS class name to scope styles to |
children | snippet | CSS declarations (without selector or braces) |