Next.js集成Contentful时富文本渲染无行间距问题如何解决？

你遇到的问题是因为@contentful/rich-text-react-renderer的documentToReactComponents方法只会把Contentful富文本结构转成原生HTML标签，不会自带任何样式。如果你的项目使用了CSS重置（比如Tailwind的默认预flight样式），会把p、标题、列表等元素的默认内外边距全部清除，就会出现行与行没有间距的情况。

解决方法 #

方法1：使用Tailwind Typography插件（Tailwind项目推荐） #

这是成本最低的方案，Tailwind官方的Typography插件可以自动给富文本内容加符合排版规范的样式：

1. 安装插件

npm install @tailwindcss/typography

2. 在tailwind.config.js中引入插件

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

3. 给富文本容器加上prose类，还可以根据需要调整尺寸、颜色等变体：

<div className="prose max-w-none mt-4">
  {documentToReactComponents(joshBlog.fields.content)}
</div>

方法2：自定义富文本节点渲染规则 #

你可以通过documentToReactComponents的第二个参数自定义每个节点的渲染样式，完全控制排版效果：

// 先引入依赖
import { BLOCKS, MARKS } from "@contentful/rich-text-types"

// 在组件内定义渲染配置
const options = {
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <p className="mb-4 leading-relaxed text-gray-800">{children}</p>,
    [BLOCKS.HEADING_2]: (node, children) => <h2 className="text-2xl font-bold mt-8 mb-4">{children}</h2>,
    [BLOCKS.HEADING_3]: (node, children) => <h3 className="text-xl font-bold mt-6 mb-3">{children}</h3>,
    [BLOCKS.UL_LIST]: (node, children) => <ul className="list-disc pl-6 mb-4">{children}</ul>,
    [BLOCKS.OL_LIST]: (node, children) => <ol className="list-decimal pl-6 mb-4">{children}</ol>,
    [BLOCKS.LIST_ITEM]: (node, children) => <li className="mb-1">{children}</li>,
    [BLOCKS.QUOTE]: (node, children) => <blockquote className="border-l-4 border-gray-300 pl-4 italic my-4">{children}</blockquote>,
  },
  renderMark: {
    [MARKS.BOLD]: text => <strong className="font-bold">{text}</strong>,
    [MARKS.ITALIC]: text => <em className="italic">{text}</em>,
  }
}

// 渲染时传入配置
<div className="mt-4">
  {documentToReactComponents(joshBlog.fields.content, options)}
</div>

方法3：手动写CSS作用于富文本容器 #

如果不使用Tailwind，可以给富文本容器加一个自定义类，然后写全局CSS控制内部标签样式：

.rich-text p {
  margin-bottom: 1rem;
  line-height: 1.7;
}
.rich-text h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 1rem 0;
}
.rich-text ul, .rich-text ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
/* 按需补充其他标签的样式 */

然后给容器加上类名即可：

<div className="rich-text mt-4">
  {documentToReactComponents(joshBlog.fields.content)}
</div>

内容的提问来源于stack exchange，提问作者FamousLastWords