Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to add class to the <body> tag #2396

Open
mzrnsh opened this issue Dec 3, 2021 · 5 comments
Open

Unable to add class to the <body> tag #2396

mzrnsh opened this issue Dec 3, 2021 · 5 comments

Comments

@mzrnsh
Copy link

mzrnsh commented Dec 3, 2021

I am trying to implement a solution for an issue related to how Gmail iOS app's dark mode works.

For this solution to work, I need the <body> tag of the generated markup to have a class .body.

There could be another way to target the body tag within Gmail, but working on this made me realize that it's not currently possible to add a class to the <body> tag via MJML.

I might have missed something, so apologies if that's the case. Here's what I've tried:

  1. Use css-class attribute on mj-body:
<mj-body css-class="body">

This applies the class to the div nested within body, not to bodydirectly.

  1. Add class as an html attribute via mj-html-attributes:
<mj-html-attributes>
  <mj-selector path="body">
    <mj-html-attribute name="class">body</mj-html-attribute>
  </mj-selector>
</mj-html-attributes>

This doesn't do anything, so it makes me think the body selector doesn't work. Other CSS selectors did work so I don't think I am using the mj-html-attributes wrong.
@iRyusa
Copy link
Member

iRyusa commented Dec 3, 2021

I think there's an open issue about this somewhere. We really need to move the body tag in mj-body in next breaking version so css-class can be applied on the top level.

cc @kmcb777 Do we have some other breaking change that we can push for a v5 ?

@matthewgovaere
Copy link

Running into this same issue — need to add a class directly to the body tag, but haven't had any luck.

Are there any temporary workarounds?

@mzrnsh
Copy link
Author

mzrnsh commented Dec 14, 2021

@matthewgovaere Are you using a build tool like Gulp with MJML?

If yes, you could watch the output file and replace <body with <body class="yourClass" on each change.

@matthewgovaere
Copy link

Thanks @mzrnsh — that's exactly what I ended up doing. Not ideal, but it'll work for now!

kmcb777 pushed a commit that referenced this issue Jan 13, 2022
ref #2396 #2355 move body tag from skeleton to mj-body, add lang on w…
1245156 
…rapping div
@rootwork rootwork mentioned this issue Mar 19, 2022
Closed
@jlarmstrongiv
Copy link

Doesn’t work for the mjml / html tag either. I ended up using the replace method too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@iRyusa @matthewgovaere @mzrnsh @jlarmstrongiv