CODEWITHSUNDEEP
reactjsnext.jsmdxjs
zummon
zummon

Reputation: 986

next-mdx-remote doesn't pass the component

I'm using next-mdx-remote

in mdx file

- Use `RAND()` in

in a react component

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

The result, output HTML

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

It should be <code class="bg-gray-50 dark:bg-gray-800"> but it doesn't.

I'm not sure why, and other tags like <p class="..."> works just fine.

Upvotes: 1

Views: 1635

Answers (1)

juliomalves
juliomalves

Reputation: 50228

Since you're using single back-tick code (inline code) you should use inlineCode to target it. code/pre targets code blocks that use triple back-ticks.

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

Upvotes: 1

Related Questions