reactjs - next-mdx-remote 不通过组件

Question

我正在使用next-mdx-remote

在 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} />
    )
}} />