mj-style

Allows you to set CSS styles that will be applied to your MJML document as well as the outputted HTML.

The CSS styles will be added to the head tag of the rendered HTML by default, but can also be inlined by using the inline="inline" attribute.

Here is an example showing its use in combination with the css-class attribute, which is supported by all body components.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="mjclass" color="green" font-size="30px" />
    </mj-attributes>
    <mj-style inline="inline">
      .blue-text div {
        color: blue !important;
      }
    </mj-style>
    <mj-style>
      .red-text div {
        color: red !important;
        text-decoration: underline !important;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="red-text">I'm red and underlined</mj-text>
        <mj-text css-class="blue-text">I'm blue because of inline</mj-text>
        <mj-text mj-class="mjclass">I'm green</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Attributes

| attribute | accepts | description | default value | | --------- | ------- | -------------------------------- | ------------- | | inline | string | set to inline to inline styles | |