Closed kavika-1 closed 3 weeks ago
Thank you so much for pointing this out!
This has been fixed under @react-email/button@0.0.16-canary.1
or @react-email/components@0.0.22-canary.0
. Check it out and let me know if it works out fine for you.
Used a similar, but different workaround to theirs.
I'm experiencing the following issue using @react-email/button@0.0.16-canary.1
in Windows Outlook 2021 and some earlier versions.
here's the html produced for the button:
<a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:12px 50px 12px 50px;color:#1b1c1d;background-color:red;border:1px solid #1b1c1d;border-radius:2px;font-size:16px;font-weight:bold" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>     </i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Padded Button</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>     ​</i><![endif]--></span></a>
resulting in:
when the expected result is:
@matt-atticus How does the original JSX for the button look like?
@gabrielmfern
<Button
href={href}
style={
{
margin: '4px 0',
padding: '12px 16px',
color: 'black',
backgroundColor: 'red',
border: `1px solid black`,
borderRadius: '2px',
fontSize: '16px',
fontWeight: 'bold',
// include `msoPaddingAlt: 0` here to fix
}
}>
{text}
</Button>
We managed to fix it by adding msoPaddingAlt: 0
to the Button style. Perhaps it's required for the <a>
as well as the <span>
that wraps the text
@matt-atticus Interesting, thanks for the heads up!
@matt-atticus Added the fix you mentioned in our component, you can install it (@react-email/button@0.0.17-canary.1
or @react-email/components@0.0.23-canary.1
) and shouldn't need the extra msoPaddingAlt
anymore!
Describe the Bug
Testing in latest Outlook Desktop. Set padding to any value, say 20px. Top bottom/padding is working, but not left/right padding.
The generated code with
<!--[if mso]>
looks good, but it appears this is now no longer supported in recent Outlook builds?This link seems to have an updated version of this approach: https://www.goodemailcode.com/email-code/link-button
Which package is affected (leave empty if unsure)
@react-email/button
Link to the code that reproduces this issue
n/a
To Reproduce
Create an html email with a Button with left/right padding set to 20 to the latest Outlook Desktop. Set padding to any value, say 20px.
Expected Behavior
Expected the left/right padding to work, but Outlook Desktop ignores the fix.
What's your node version? (if relevant)
No response