Outlook renders css as text

[djm158]

Using the sample from this repo, i get this rendered in outlook:

body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
96
.mj-column-per-100 { width:100% !important; max-width: 100%; }
}
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}

mjml 4.11.0 mjml-react 1.2.2 node v14.15.5 react 17.0.2

[daliusd]

I would try it with pure mjml https://mjml.io/try-it-live and see if the same problem is reproducible. We do testing with different Outlook versions and we have not seen anything like that.

BTW, you forgot to specify Outlook version. That's important as well.

[djm158]

@daliusd cheers for the reply, sorry for the delay, was out on vacation.

Here's the outlook version:

Microsoft® Outlook® for Microsoft 365 MSO (Version 2111 Build 16.0.14701.20240) 32-bit 

I tried the example with pure MJML and still get the same result

maybe need to open this as an issue in the mjml repo?

[daliusd]

Yes, please open it in mjml repo. mjml-react is just React wrapper around mjml. I'm closing this here as we can't do anything to fix this problem.