reactjs - 使用 Chakra UI 为 MDX 文件设计样式

Question

我正在尝试在 next.js 应用程序中使用 Chakra UI 设置降价文件的样式。在这种情况下，我创建了以下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 规则，它强制您为组件指定一个 displayName，方法是为返回 JSX 组件的函数指定一个名称，或者手动为组件设置一个 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"