react-pdf模块Outline组件样式设置咨询：className属性用法

当然可以通过className属性为react-pdf的Outline组件定制样式，下面是具体实现方法：

1. 基础用法：传递className属性 #

先在JSX中给Outline组件指定自定义类名：

import { Document, Outline, Page } from '@react-pdf/renderer';

const CustomPdfDocument = () => (
  <Document>
    <Page>
      {/* 页面内容... */}
    </Page>
    {/* 给Outline组件添加自定义类名 */}
    <Outline className="custom-pdf-outline" />
  </Document>
);

2. 编写全局CSS样式 #

在全局CSS文件中，针对自定义类名和Outline组件内部的默认类名编写样式：

/* 定制Outline容器的整体样式 */
.custom-pdf-outline {
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

/* 定制大纲链接的基础样式 */
.custom-pdf-outline .react-pdf__outline__link {
  color: #2d3748;
  text-decoration: none;
  padding: 4px 0;
  display: block;
}

/* 鼠标悬停时的链接样式 */
.custom-pdf-outline .react-pdf__outline__link:hover {
  color: #2b6cb0;
  font-weight: 500;
}

/* 不同层级大纲项的缩进控制 */
.custom-pdf-outline .react-pdf__outline__item--level-1 {
  margin-left: 0;
  font-weight: bold;
}

.custom-pdf-outline .react-pdf__outline__item--level-2 {
  margin-left: 16px;
}

.custom-pdf-outline .react-pdf__outline__item--level-3 {
  margin-left: 32px;
  font-size: 0.9em;
}

3. CSS模块场景下的用法 #

如果你使用CSS模块（避免全局样式污染），需要用:global()包裹react-pdf内部的默认类名，确保样式能正确匹配：

JSX代码： #

import styles from './PdfDocument.module.css';
import { Document, Outline, Page } from '@react-pdf/renderer';

const CustomPdfDocument = () => (
  <Document>
    <Page>
      {/* 页面内容... */}
    </Page>
    <Outline className={styles.customOutline} />
  </Document>
);

对应的.module.css文件： #

.customOutline {
  padding: 1rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
}

/* 使用:global()匹配组件内部的默认类名 */
.customOutline :global(.react-pdf__outline__link) {
  color: #495057;
  transition: color 0.2s;
}

.customOutline :global(.react-pdf__outline__link:hover) {
  color: #007bff;
}

.customOutline :global(.react-pdf__outline__item--level-1) {
  margin-bottom: 8px;
}

关键说明 #

react-pdf的Outline组件会自动生成以下核心类名，你可以直接针对这些类名做样式定制：

• react-pdf__outline: 外层容器类名
• react-pdf__outline__item: 每个大纲项的容器类名，不同层级会附加--level-N后缀（N为层级数）
• react-pdf__outline__link: 大纲项的链接元素类名

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