reactjs - 使用 Chakra UI 为 MDX 文件设计样式
问题描述
我正在尝试在 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
:
知道为什么我会收到此错误消息以及我可以做些什么来解决它吗?
谢谢。
解决方案
您启用了一个 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"
推荐阅读
- html - 我在哪里可以找到我的 github 静态网页的实时 html?
- php - 如何在添加更多按钮的末尾删除多余的空列
- html - 如何使用同名标签捕获表单中不同字段的数据?
- ansible - 如何使用具有从hostvars接收值的变量的ansible模板模块?
- c# - 在 c# 中访问给定套接字的 TCP 重传字节数(和重传数据包数)
- amazon-web-services - AWS SFTP 必须允许用户在 S3 中下载具有特定标签的文件
- sql-server - 将布尔数据类型数据从 datagridview 插入 SQL Server 数据库
- data-warehouse - databricks:从数据仓库临时目录中读取
- spring - 如何使用 Spring 缓存缓存 JPA OneToMany 关系
- javascript - 在 cloudflare-worker 服务上解析原始正文(非节点)