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

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 规则，该规则强制您为组件指定一个显示名称，方法是为 return 是 JSX 组件的函数指定一个名称，或者手动为组件设置一个显示名称。

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

  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"

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

Styling MDX Files with Chakra UI

typescript

reactjs

eslint

next.js

mdxjs