Theming not working

Hi, I think mdx-deck is pretty cool and decided to make my first presentation with it this weekend but I’m having a little bit of trouble.

I need some block quotes and lists, but the default styling doesn’t seem right to me so I decided to create my own theme that uses italic font for block quotes and centers list items. For some reason it is not working.

I’m running the latest version 1.8.2. Here’s my code.

index.mdx

export { default as theme } from './Theme.js'

# This is the title of my deck
---

> some qoute

- one
- two
- three
---
# The End

Theme.js

// example theme
import theme from 'mdx-deck/themes'

export default {
  ...theme,
  blockquote: {
    fontStyle: 'italic'
  },
  li: {
    textAlign: 'left'
  }
}

package.json

{
  "name": "mdx-sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@mdx-js/tag": "^0.16.6",
    "react": "^16.7.0"
  }
}

Actual Result

The browser shows the same default theme. the quote text is not in italics and the list items align to center instead of left.

Expected Result

If I edit styles with the browser’s dev tools I can get the expected result

[GAumala]

That actually worked.

installed mdx-deck as a dev dependency with Yarn and then ran node_modules/.bin/mdx-deck index.mdx . Everything styles correctly, also bold text in headers is a lot bigger.

Thanks for the help!

[jxnblk]

Sounds good – I suspect it might be an issue with styled-components, which can not work as expected when there are multiple/conflicting versions