Styling MDX Files with Chakra UI

Question

I am trying to style markdown files using Chakra UI in a next.js app. To that extent, I have created the following MDXComponents.tsx file:

import { chakra } from "@chakra-ui/react"

const MDXComponents = {
  p: (props) => <chakra.p fontSize="2xl" color="blue.500" {...props} />,
}

export default MDXComponents

I then import this file into _app.tsx and everything works as I want it to. Nonetheless, I get the following error in the MDXComponents.tsx file: Component definition is missing display name:

Any idea why I am getting this error message and what I can do to fix it?

Thanks.

score 1 · Accepted Answer · answered Jul 23 '21 at 11:51

You have an eslint rule enabled that forces you to give your components a displayName, either by giving the function that returns a JSX component a name, or by manually setting a displayName to the component.

As you can see, your functions that return the components are anonymous arrow functions. eg:

  p: (props) => <chakra.p fontSize="2xl" color="blue.500" {...props} />,

Try using a standard function and giving the function a name, like this:

  p: function Paragraph(props) {
     return <chakra.p fontSize="2xl" color="blue.500" {...props} />
   }

With MDX it could get tedious to always give the function a name, and arrow functions are cleaner, so I suggest you turn the eslint option off in your eslintconfig file:

"react/display-name": "off"

Styling MDX Files with Chakra UI

1 Answers1