Table styling and alignment is wonky

Subject of the issue

When you specify the alignment of a table in markdown syntax, the generated html is strange. It doesn’t respect the specified alignment, nor correctly get assigned style.

Your environment

• OS: Windows 10

Packages

• Base: https://github.com/christopherbiscardi/gatsby-starter-mdx-basic
• @mdx-js/mdx and @mdx-js/react set to 1.5.5

Env

• yarn 1.21.1
• node 12.14.1

Steps to reproduce

Using the Gatsby starter, place or replace the following mdx in src/pages/index.mdx

| Left | Centre | Right |
|:-----|:------:|------:|
| 1 | 2 | 3 |

navigate to localhost:8000/

Expected behaviour

Every component of the table should receive a style if nessisary, and alignment should be respected based on stated alignment.

<table class="css-somehash">
  <thead class="css-somehash">
    <tr class="css-somehash">
      <th align="left"   class="css-somehash">Left</th>
      <th align="center" class="css-somehash">Centre</th>
      <th align="right"  class="css-somehash">Right</th>
    </tr>
  </thead>
  <tbody class="css-somehash">
    <tr class="css-somehash">
      <td align="left"   class="css-somehash">1</td>
      <td align="center" class="css-somehash">2</td>
      <td align="right"  class="css-somehash">3</td>
    </tr>
  </tbody>
</table>

Actual behaviour

In versions prior to 1.5.5, the alignment was correct, but the css classes were absent on inner tags like tr and th,

<table class="css-0">
  <thead>
    <tr class="css-0">
      <th class="css-0">Left</th>
      <th class="css-0">Centre</th>
      <th class="css-0">right</th>
    </tr>
  </thead>
  <tbody>
    <tr class="css-0">
      <td class="css-0">1</td>
      <td class="css-0">2</td>
      <td class="css-0">3</td>
    </tr>
  </tbody>
</table>

[Everspace]

Thank you. I will go over there and bother them.

[denu5]

@ChristianMurphy thanks! actually just found the official way since I’m also using the theme-ui plugin, you can pass a style object with styles, which is the customized theme-ui provider I guess

style={{
    table: {
      width: '100%',
      borderCollapse: 'separate',
      borderSpacing: 0
    },
    th: {
      textAlign: 'left',
      borderBottomStyle: 'solid'
    },
    td: {
      textAlign: 'left',
      borderBottomStyle: 'solid'
    },
  }}