mj-text links css

[Fanetteg]

Hi,
I can't seem to find how the links displayed in mj-text can be styled in mjml.
They stay purple+underline no matter what I do.
Tried to find the solution in the documention and here but couldn't.
Thank you

[ngarnier]

Hey @Fanetteg, mj-text takes raw HTML so you can style the a element with inlined HTML attributes or even CSS using mj-style.

Example: https://mjml.io/try-it-live/S1D6pL_yb (note that I could have used a instead of the .link-nostyle class)

<mjml>
  <mj-head>
    <mj-style inline="inline">
      .link-nostyle { color: inherit; text-decoration: none }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-text font-size="20px" color="#F45e46" font-family="helvetica">
            <a href="https://mjml.io" class="link-nostyle">Hello World</a>
          </mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

I think it solves your issue so I'm closing but feel free to answer and we'll reopen if it's not the case!

[SoyDiego]

Hi, this not working in Outlook or IOs. Someone knows how is the correct code in MJML to blue links in Outlook and IOs. Thanks!

[Maxime-p]

Still no fully working answer?

[dmitrypanteleeff]

Still no fully working answer?

Hi. In my opinion, you can put special atribute style for changing color

 <a href="https://www.google.com" 
     style="color: #FF0000; text-decoration: none;" 
     target="_blank" 
     rel="nofollow">
       <span>google</span>
</a>

[thijs-qv]

this works for me (color of mj-text block is needed so the anchor color inside differs)

<mjml>
  <mj-head>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text color="#eeeeee"><a href="https://mjml.io" style="color:#F45e46;text-decoration:none;font-size:20px;font-family:helvetica">red link no underline (as inline style)</a></mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>