[MDX] Build a Custom Provider Component for MDX Deck

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

MDX Deck is a great library for building slides using Markdown and JSX. Creating a custom Provider component allows you to change the markup of the entire deck. This lets you put things like logos and social media handles in each slide easily.

In this lesson, you'll learn how to create a basic custom Provider that adds a Twitter handle to the bottom right corner of every slide.

1. Create a Provider.js:

import React from 'react'

import ThemeProvider from 'mdx-deck/dist/Provider'

const Provider = ({ children, ...rest }) => (

  <ThemeProvider {...rest}>

    {children}

    <div

      style={{

        position: 'absolute',

        bottom: '1em',

        right: '1em'

      }}

    >

      <a href="https://twitter.com/Zhentiw">

        @Zhentiw

      </a>

    </div>

  </ThemeProvider>

)

export default Provider

2. Create a theme.js:

import theme from 'mdx-deck/themes'

import Provider from './Provider'

export default {

  ...theme,

  Provider

}

3. Use it:

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

# Step 1: Create a Custom Theme

---

# Step 2: Create a Custom Provider

---

# Step 3: Export Our Theme in the mdx-deck