fix(react-email): apply th styles to markdown table header cells
Bug
I hit this when styling a markdown table in an email with <Markdown markdownCustomStyles={{ th: { fontWeight: 'bold' }, td: { color: 'gray' } }}>. The th styles never showed up. Header cells were rendered with the td styles instead, so the output was <th style="color:gray">Name</th> rather than <th style="font-weight:bold">Name</th>.
Root cause
StylesType and the default styles both define a th key, but renderer.tablecell in markdown.tsx always reads finalStyles.td when it builds the style attribute, including for header cells. As a result, markdownCustomStyles.th is never read.
Solution
The cell renderer now looks up the style by the tag it is about to render (finalStyles[type], where type is th or td). I also merged the two duplicated tag branches (with and without align) into one template, so the style string is computed once. I added a patch changeset for react-email.
Closes #3760
Testing
- Added a test to
markdown.spec.tsxthat renders a table with separatethandtdstyles and checks that header cells getthstyles and body cells gettdstyles, including the aligned column. It fails oncanary(<th style="color:gray">) and passes with the fix. - The full
react-emailtest suite passes (45 files, 300 tests), andtsc --noEmitandbiome checkare clean.
Summary by cubic
Fixes <Markdown> in react-email so table header cells now receive markdownCustomStyles.th instead of always inheriting td styles.
Bug Fixes
- Header cells previously rendered with
tdstyles because the cell renderer always readfinalStyles.td; it now looks up the style by the tag it renders (thortd). - Merged the duplicated cell renderer branches (with and without
align) into a single template. - Added a regression test covering separate
thandtdstyles, including aligned columns.