fix(jsx-email): border not showing up in outlook using `withBackgroun…

…d` (#278)
shellscape · Jan 12, 2025 · 3dba094 · 3dba094
1 parent 7c9e5e7
commit 3dba094
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/packages/jsx-email/src/components/button.tsx b/packages/jsx-email/src/components/button.tsx
@@ -69,21 +69,6 @@ export const Button: JsxEmailComponent<ButtonProps> = ({
     ...(textColor ? { color: textColor } : {})
   };
 
-  const baseButton = (
-    <a
-      href={href}
-      style={{
-        ...baseStyles,
-        ...propStyles,
-        ...style,
-        ...(withBackground ? {} : { msoHide: 'all' })
-      }}
-      {...props}
-    >
-      {children}
-    </a>
-  );
-
   return (
     <table
       {...debugProps}
@@ -123,6 +108,10 @@ export const Button: JsxEmailComponent<ButtonProps> = ({
               cellPadding={0}
               cellSpacing={0}
               role="presentation"
+              style={{
+                border: `${borderSize ?? '0'}px solid ${borderColor ?? 'inherit'}`,
+                borderRadius
+              }}
             >
               <tr>
                 <td
@@ -138,12 +127,35 @@ export const Button: JsxEmailComponent<ButtonProps> = ({
                     width
                   }}
                 >
-                  {baseButton}
+                  <a
+                    href={href}
+                    style={{
+                      ...baseStyles,
+                      ...(backgroundColor ? { backgroundColor } : {}),
+                      ...(textColor ? { color: textColor } : {}),
+                      ...style,
+                      ...(withBackground ? {} : { msoHide: 'all' })
+                    }}
+                    {...props}
+                  >
+                    {children}
+                  </a>
                 </td>
               </tr>
             </table>
           ) : (
-            baseButton
+            <a
+              href={href}
+              style={{
+                ...baseStyles,
+                ...propStyles,
+                ...style,
+                ...(withBackground ? {} : { msoHide: 'all' })
+              }}
+              {...props}
+            >
+              {children}
+            </a>
           )}
         </td>
       </tr>

diff --git a/packages/jsx-email/test/.snapshots/button.test.tsx.snap b/packages/jsx-email/test/.snapshots/button.test.tsx.snap
@@ -4,6 +4,6 @@ exports[`<Button> component > renders correctly when nested in <Background> 1`]
 "<table cellPadding=\\"0\\" cellSpacing=\\"0\\" border=\\"0\\" width=\\"100%\\" role=\\"presentation\\"><tr><td valign=\\"top\\" background=\\"link-to-image\\" style=\\"background-repeat:no-repeat\\"><jsx-email-cond>
 <!--[if gte mso 9]>
 <v:rect xmlns:v=\\"urn:schemas-microsoft-com:vml\\" fill=\\"true\\" stroke=\\"false\\" style=\\"mso-width-percent:1000;\\"><v:fill type=\\"frame\\" src=\\"link-to-image\\" /><v:textbox style=\\"mso-fit-shape-to-text:true\\" inset=\\"0,0,0,0\\"><![endif]-->
-<div><table width=\\"100%\\" border=\\"0\\" cellPadding=\\"0\\" cellSpacing=\\"0\\" style=\\"border-collapse:collapse\\" role=\\"presentation\\"><tr><td align=\\"left\\"><table align=\\"left\\" width=\\"200\\" border=\\"0\\" cellPadding=\\"0\\" cellSpacing=\\"0\\" role=\\"presentation\\"><tr><td bgcolor=\\"#cccccc\\" width=\\"200\\" height=\\"40\\" style=\\"border-radius:0;height:40px;max-width:200px;text-align:center;width:200px\\"><a href=\\"https://example.com\\" style=\\"-webkit-text-size-adjust:none;border-radius:0;display:inline-block;font-size:16px;line-height:38px;max-width:200px;text-align:center;text-decoration:none;width:100%;background-color:#cccccc;padding:12px 20px\\"></a></td></tr></table></td></tr></table></div>
+<div><table width=\\"100%\\" border=\\"0\\" cellPadding=\\"0\\" cellSpacing=\\"0\\" style=\\"border-collapse:collapse\\" role=\\"presentation\\"><tr><td align=\\"left\\"><table align=\\"left\\" width=\\"200\\" border=\\"0\\" cellPadding=\\"0\\" cellSpacing=\\"0\\" role=\\"presentation\\" style=\\"border:1px solid inherit;border-radius:0\\"><tr><td bgcolor=\\"#cccccc\\" width=\\"200\\" height=\\"40\\" style=\\"border-radius:0;height:40px;max-width:200px;text-align:center;width:200px\\"><a href=\\"https://example.com\\" style=\\"-webkit-text-size-adjust:none;border-radius:0;display:inline-block;font-size:16px;line-height:38px;max-width:200px;text-align:center;text-decoration:none;width:100%;background-color:#cccccc;padding:12px 20px\\"></a></td></tr></table></td></tr></table></div>
 <!--[if gte mso 9]></v:textbox></v:rect><![endif]--></jsx-email-cond></td></tr></table>"
 `;