Theme-ui: Styled MDX tables do not respect the specified alignment.

Created on 7 Feb 2020 · 3Comments · Source: system-ui/theme-ui

Describe the bug
The styled MDX is unaligned, regardless of how you specify it.

To Reproduce
Steps to reproduce the behavior:

Use a gatsby theme-ui/mdx starter
Use the following MDX

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

Navigate to page with generated MDX
See error

Expected behavior
The th, and td elements should have the align attribute correctly set.

In addition it seems the class attribute is set strangely class="css-0".

Additional context
Add any other context about the problem here.

Initially reported in the MDX here: https://github.com/mdx-js/mdx/issues/930

bug help wanted

Source

Everspace

Most helpful comment

Hello,
I saw the same issue. Personally I solve the problem by customize MDX tags <th /> and <td /> like this :

// /src/gatsby-plugin-theme-ui/components.js

/** @jsx jsx */
import { jsx, Styled } from "theme-ui"
import Prism from "@theme-ui/prism"

export default {
  th: ({ align, ...props }) => (
    <Styled.th style={align && { textAlign: align }} {...props} />
  ),
  td: ({ align, ...props }) => (
    <Styled.td style={align && { textAlign: align }} {...props} />
  ),
}

Sporandum on 14 Sep 2020

❤2

All 3 comments

Thanks! This sounds like a bug. If anyone wants to open a PR with a failing test case, please feel free to do so

jxnblk on 10 Feb 2020

Hello,
I saw the same issue. Personally I solve the problem by customize MDX tags <th /> and <td /> like this :

// /src/gatsby-plugin-theme-ui/components.js

/** @jsx jsx */
import { jsx, Styled } from "theme-ui"
import Prism from "@theme-ui/prism"

export default {
  th: ({ align, ...props }) => (
    <Styled.th style={align && { textAlign: align }} {...props} />
  ),
  td: ({ align, ...props }) => (
    <Styled.td style={align && { textAlign: align }} {...props} />
  ),
}

Sporandum on 14 Sep 2020

❤2

Fixed with #1347