使用Chakra UI设置MDX文件的样式

Question

我正在尝试在next.js应用程序中使用Chakra UI设置markdown文件的样式。为此，我创建了以下MDXComponents.tsx文件：

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

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

export default MDXComponents

然后，我将这个文件导入到_app.tsx中，一切都按照我想要的那样工作。尽管如此，我还是在MDXComponents.tsx文件中得到了以下错误：Component definition is missing display name

​

​

你知道为什么我会收到这个错误消息吗?我能做些什么来修复它？

谢谢。

Answer 1

您已经启用了eslint规则，该规则强制您通过为返回JSX组件的函数提供名称，或者通过手动设置组件的displayName，来为组件提供displayName。

如您所见，返回组件的函数是匿名箭头函数。例如：

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

尝试使用标准函数并为该函数命名，如下所示：

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

使用MDX时，总是为函数命名可能会变得单调乏味，而且箭头函数更简洁，因此我建议您在eslintconfig文件中关闭eslint选项：

"react/display-name": "off"