使用 Chakra UI 设计 MDX 文件答案

【问题标题】：Styling MDX Files with Chakra UI使用 Chakra UI 设计 MDX 文件
【发布时间】：2021-09-30 12:42:13
【问题描述】：

我正在尝试在 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:

知道我收到此错误消息的原因以及我能做些什么来解决它吗？

谢谢。

【问题讨论】：

标签： reactjs typescript next.js eslint mdxjs

【解决方案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"

【讨论】：