Override html tags used in mdx file

[gabriele-ct]

I have an mdx file that looks roughly like this:

## New chapter

Here's a list of definitions:

<dl>
  <dt>Some term</dt>
  <dd>Some definition</dd>
</dl>

In my nextjs app, I'd like to override the look of the dd tags like I do for other tags, for example h1, h2....

This is a simplified version of the mdx processing code:

cost content = ... // I get somehow the content of the mdx file described above
const jsxRuntime =
    process.env.NODE_ENV === 'development'
      ? await import('react/jsx-dev-runtime')
      : await import('react/jsx-runtime');
  const {
    default: MDX,
  } = await run(content, {
    ...jsxRuntime,
    baseUrl: import.meta.url,
  });

return (
    <>
          <MDX
            components={{
              dd: MyCustomReactComponentForDD,
              h2: MyCustomReactComponentForH2
            }}
          />
    </>
  );

In the rendered html I can see the custom H2 component being rendered, but no custom component for the dd tag.
Any idea about what I'm doing wrong?

[wooorm]

Hi Gabriele!

Don’t.

You can write Dl instead of dl, Dt instead of dt. Dd instead of dd.
Or, even use more descriptive names: DefinitionList, DefinitionTitle, DefinitionData.
Maybe even prefix your custom components: definition.list, definition.title, definition.data.

This is how JSX works: some things are components, some things are not components. I’d really recommend using that here too.

For in-depth info on this, see the documentation: https://mdxjs.com/docs/using-mdx/.

[gabriele-ct]

Thank you, that makes sense.