Custom theme with Custom Provider

[iamchathu]

I'm creating a Theme for MDX-Deck and I want to change current default Layout of the Presentation. After going though I thought I can be done with Custom Provider.

So I created the theme like this.

import Provider from './Provider';

export default {
...
  Provider,
};

My Provider is like

import React from 'react';
import { MDXProvider } from '@mdx-js/react';

import { Center } from '../Layout';

const Wrapper = (props) => <Center withFooter {...props} />;

export default ({ children }) => (
  <MDXProvider components={{ wrapper: Wrapper }}>{children}</MDXProvider>
);

But i doesn't got applied to slides.

It works

Like this in my mdx file

export default (props) => <Center withFooter>{props.children}</Center>;

# Heading

## Sub Heading

Some Text

---

## AbC

But from second slide onwards my em based font size get small since first slide has a media query to set 32px and it get destroyed in next slide.

If you can help me on this I will be able to write guide on custom theming MDX-Deck

[light-and-salt]

I was trying to provide my custom theme as well and found the Provider example in README very helpful:

https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider

[iamchathu]

@ZeningQu This is my https://github.com/iamchathu/mdx-deck-auth0 But footer doesn't get theme fonts.

[arothuis]

I have been struggling with this as well.

Not sure, but I don't think the general theme is applied to a Provider, because it is not in the scope of the configured theme. I 'fixed' this by manually querying the Theme UI context via useThemeUI (a hook that gets the themeContext from the outer Provider), see the docs.

Say you want to add a slide number to each slide, but you want to adhere to the same theme as the rest of the presentation:

import React from "react";
import { useDeck } from "mdx-deck";
import { useThemeUI } from "theme-ui";

export default function currentSlide(props) {
    const state = useDeck();
    const currentSlide = state.index;

    const themeContext = useThemeUI();
    const {theme} = themeContext;

    return (
        <div>
            {props.children}
            <p
                css={{
                    color: theme.colors.text,
                    fontFamily: theme.fonts.body,
                    position: "fixed",
                    right: 0,
                    bottom: 0,
                    margin: 16,
                }}
            >
                { currentSlide }
            </p>
        </div>
    );
}

I am new in the world of MDX, mdx-deck, Gatsby, Theme UI and Emotion, so there is a good chance there is a better, more idiomatic solution out there.