next-mdx-remote 不传递组件

Question

在 mdx 文件中

- Use `RAND()` in

在反应组件中

import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'

const content = await serialize(content, {
  mdxOptions: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
  scope: frontmatter,
}),

<MDXRemote {...content} components={{
  code: ({ children }: { children: ReactNode }) => (
    <code className="bg-gray-50 dark:bg-gray-800" children={children} />
  ),
}} />

结果，输出HTML

<li>
  Use 
  <code>
    RAND()
  </code> 
  in
</li>

应该是<code class="bg-gray-50 dark:bg-gray-800">，但不是。

我不确定为什么，其他标签如 <p class="..."> 工作得很好。

Answer 1

由于您使用的是单个反引号代码（内联代码），因此您应该使用 inlineCode 来定位它。 code/pre 针对使用三重反引号的代码块。

<MDXRemote {...content} components={{
    inlineCode: ({ children }: { children: ReactNode }) => (
        <code className="bg-gray-50 dark:bg-gray-800" children={children} />
    )
}} />

next-mdx-remote 不传递组件

next-mdx-remote doesn't pass the component

reactjs

next.js

mdxjs