Theming styles working inconsistently between markdown / html / components

[amberleyromo]

Hi there!

Wondering what I could be doing wrong here. Following the docs to include the <Appear> component, for list items.

When using a markdown unordered list, the theming styles apply as expected:

- Item one
- Item two
- Item three

When converting it to use <Appear>, the styles don't take effect:

<ul>
  <Appear>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
  </Appear>
</ul>

[jxnblk]

You're not doing anything wrong at all! 😬 Although the current implementation isn't ideal, the theming only applies to MDX components at the moment, which means only elements generated from markdown will pick up those styles. And with the way MDX itself works, you can't nest markdown inside of a React component like Appear.

With the current version, the best way I know of styling both markdown lists and JSX elements the same way would be to add a global style for <ul>. I think adding a custom Provider would be the way to go, where you could add a styled-component that targets child <ul>

Maybe something like:

const Root = styled.div({
  '& ul': {
    ...listStyles
  }
})

[jxnblk]

This will still be an issue, but just merged v2, which should resolve this issue. You can install the beta with npm i mdx-deck@next if you want to give it a shot