演示场地

MDX

Loading playground...

使用方法

Basic Usage


import { Playground } from 'nextra/components'
 
# Playground
 
Below is a playground component. It mixes into the rest of your MDX perfectly.
 
<Playground
  source="## Hello world"
  components={{ h2: props => <h2 {...props} className="myClass" /> }}
/>

You may also specify a fallback component like so:

Usage with Fallback


import { Playground } from 'nextra/components'
 
<Playground
  source="## Hello world"
  components={{ h2: props => <h2 {...props} className="myClass" /> }}
  fallback={<div>Loading playground...</div>}
/>

避免未样式化的输出

为了防止元素未样式化，请从你的 mdx-components 文件中导入 useMDXComponents。调用此函数并将返回的组件传递给 components 属性。你也可以在第一个参数中包含你的自定义组件：


import { Playground } from 'nextra/components'
import { useMDXComponents } from '../path/to/my/mdx-components'
 
<Playground
  source="## Hello world"
  components={useMDXComponents({
    h2: props => <h2 {...props} className="myClass" />
  })}
  fallback={<div>Loading playground...</div>}
/>