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)