Confused about purpose of mjml-text

[callumlocke]

Hi. I am just learning MJML. The docs for mjml-text suggest you can nest "any HTML tag with any attributes". And it gives this example:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>
          <h1>
            Hey Title!
          </h1>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

The description is simply:

This tag allows you to display text in your email.

But what does it do? I can see that it lets me specify text styles, but then I could also do that on the h1 directly. In the case of font-size, I would have to add it on the h1 either way, because otherwise the browser default h1 font-size will override whatever font-size I set on the mj-text... so, why use the mj-text at all? What's it for?

It could do with a bit more explanation than "This tag allows you to display text in your email." :)

I tried the Getting Started tutorial but it doesn't shed much light.

[iRyusa]

It’s a standard tag for content inside a column. Mj-text also has extra attributes as container background color, padding. You can also style them with mj attributes.

…

> On 18 Nov 2019, at 19:55, Callum Locke ***@***.***> wrote:  Hi. I am just learning MJML. The docs for mjml-text suggest you can nest "any HTML tag with any attributes". And it gives this example: <mjml> <mj-body> <mj-section> <mj-column> <mj-text> <h1> Hey Title! </h1> </mj-text> </mj-column> </mj-section> </mj-body> </mjml> The description is simply: This tag allows you to display text in your email. But what does it do? I can see that it lets me specify text styles, but then I could also do that on the h1 directly. In the case of font-size, I would have to add it on the h1 either way, because otherwise the browser default h1 font-size will override whatever font-size I set on the mj-text... so, why use the mj-text at all? What's it for? It could do with a bit more explanation than "This tag allows you to display text in your email." :) I tried the Getting Started tutorial but it doesn't shed much light. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[ngarnier]

Basically mj-text enables you to add Text inside a column. The fact it supports HTML is simply for more flexibility but that doesn't make the usage of mj-text attributes useless.

Consider this simple example: https://mjml.io/try-it-live/SJRh3wlhS

Simply put, it enables to:

• Style all text children at once for common styles (here with color)
• Reuse HTML semantics for structure and styling (here with h1/p)
• Override some children like you would in HTML / CSS (here with span that has its own font-family)

And all this without having to create a different mj-text each time.

[jglovier-okta]

Consider this simple example: https://mjml.io/try-it-live/SJRh3wlhS
Ahhh this is super helpful. Thank you!!

This had me very confused as well. I didn't realize that the <mj-text> component compiles to <div> tags. 😄 I've been using MJML to update legacy email templates for the past week and thought that <mj-text> just rendered as <p> tags and so I was just limited to styling <p> tags as headings. I just went searching for a way to add heading tags in MJML and discovered this issue so now I understand it's just a <div> wrapper that I can put any content inside. Thanks!

PS - it might be helpful to see that a bit more explicitly in the docs. 🙏