NextJS中react-markdown渲染标题大小一致问题求助

问题原因 #

react-markdown会将Markdown中的#到######正确转换为<h1>到<h6>标签，但如果没有为这些标签设置层级化的字体大小样式，浏览器默认样式（或全局样式重置）会导致所有标题大小一致。

解决方案 #

结合你代码里使用Tailwind CSS的情况，提供两种实用方案：

方案1：自定义react-markdown标题组件（推荐） #

修改MarkdownRenderer组件，通过components属性为每个标题标签指定Tailwind字体大小类，精准控制样式：

import ReactMarkdown from 'react-markdown';

export const MarkdownRenderer = ({ markdownText }) => {
  const customComponents = {
    h1: ({ children }) => <h1 className="text-4xl font-bold mb-4">{children}</h1>,
    h2: ({ children }) => <h2 className="text-3xl font-semibold mb-3">{children}</h2>,
    h3: ({ children }) => <h3 className="text-2xl font-medium mb-2">{children}</h3>,
    h4: ({ children }) => <h4 className="text-xl font-medium mb-2">{children}</h4>,
    h5: ({ children }) => <h5 className="text-lg font-medium mb-1">{children}</h5>,
    h6: ({ children }) => <h6 className="text-base font-medium mb-1">{children}</h6>,
  };

  return (
    <div>
      <ReactMarkdown components={customComponents}>{markdownText}</ReactMarkdown>
    </div>
  );
};

方案2：添加全局CSS样式 #

在全局CSS文件（如styles/globals.css）中为h1到h6设置层级样式：

.markdown-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.markdown-content h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.875rem;
}
.markdown-content h3 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.markdown-content h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.markdown-content h5 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.markdown-content h6 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

然后修改MarkdownRenderer，给外层容器加上样式类：

import ReactMarkdown from 'react-markdown';

export const MarkdownRenderer = ({ markdownText }) => {
  return (
    <div className="markdown-content">
      <ReactMarkdown>{markdownText}</ReactMarkdown>
    </div>
  );
};

说明 #

• 方案1灵活性更高，可针对单个标题独立调整样式，适配Tailwind项目的开发习惯；
• 方案2适合统一管理所有Markdown内容的样式，所有使用该类的渲染区域都会应用这套规则。

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