如何在Next.js中为Markdown内容设置样式？

方法1：使用全局CSS #

Next.js中可通过全局样式文件统一管理页面样式，适合项目通用的排版规则：

1. 在项目根目录创建styles/global.css文件，添加以下样式：

/* 基础文章容器样式 */
article.post-content {
  font-family: Helvetica,Arial,sans-serif;
  color: #666;
  font-size: 16px;
}

/* 定位文章内的h2标题 */
article.post-content h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem;
  color: #333;
}

/* 定位文章内的h3标题 */
article.post-content h3 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 1.2rem 0 0.8rem;
  color: #444;
}

/* 定位文章内的无序列表 */
article.post-content ul {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

/* 定位文章内的列表项 */
article.post-content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

2. 在pages/_app.js中引入全局样式，确保样式全局生效：

import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

3. 修改你的组件代码，给article标签添加类名：

<h1 className="text-3xl mb-3 leading-snug display-6">{currentPost.title}</h1>

<article className="post-content" dangerouslySetInnerHTML={{ __html: md.render(currentPost.content) }} />

方法2：使用CSS Modules（推荐，样式隔离） #

CSS Modules会自动给类名添加哈希后缀，避免不同组件间的样式冲突，适合组件级别的样式管理：

1. 在组件所在目录创建PostContent.module.css文件：

/* 文章容器样式 */
.content {
  font-family: Helvetica,Arial,sans-serif;
  color: #666;
  font-size: 16px;
}

/* 容器内的h2样式 */
.content h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem;
  color: #333;
}

/* 容器内的h3样式 */
.content h3 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 1.2rem 0 0.8rem;
  color: #444;
}

/* 容器内的无序列表样式 */
.content ul {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

/* 容器内的列表项样式 */
.content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

2. 在组件中导入并使用该样式模块：

import styles from './PostContent.module.css';

// ...

<h1 className="text-3xl mb-3 leading-snug display-6">{currentPost.title}</h1>

<article className={styles.content} dangerouslySetInnerHTML={{ __html: md.render(currentPost.content) }} />

方法3：基于Tailwind CSS的实现（若项目已使用） #

如果你的项目用了Tailwind CSS，可以通过@apply复用Tailwind工具类，快速定义样式：

1. 在styles/global.css中添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

article.post-content {
  @apply font-sans text-gray-600 text-base;
}

article.post-content h2 {
  @apply text-2xl font-semibold my-6 text-gray-800;
}

article.post-content h3 {
  @apply text-xl font-medium my-4 text-gray-700;
}

article.post-content ul {
  @apply pl-6 my-4;
}

article.post-content li {
  @apply mb-2 leading-relaxed;
}

2. 给article标签添加post-content类名即可生效。

核心逻辑 #

markdown-it生成的HTML元素（h2、h3、ul、li等）都是article标签的子元素，通过后代选择器（如article h2）可以精准定位这些元素，按需设置样式属性。你可以根据需求调整字体、颜色、间距等参数。

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