react-pdf/renderer中Text组件样式不生效问题求助

以下是针对你遇到的样式不生效问题的排查方向和解决方案：

1. 修复渲染代码中的变量错误 #

你的渲染代码存在变量未声明的问题，可能引发隐性错误间接导致样式解析异常：

// 修正前
const container = document.getElementById('pdf-root');
if (pdfRoot == null)
    pdfRoot = createRoot(container);
pdfRoot.render(<PdfRoot/>)

// 修正后
let pdfRoot; // 先声明变量
const container = document.getElementById('pdf-root');
if (pdfRoot == null) {
    pdfRoot = createRoot(container);
}
pdfRoot.render(<PdfRoot/>)

2. 使用StyleSheet.create定义样式 #

尝试用react-pdf官方推荐的StyleSheet.create方法定义样式，替代直接传入内联对象，避免解析兼容问题：

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

const styles = StyleSheet.create({
  customText: {
    fontFamily: 'Courier',
    fontSize: '12pt',
  },
});

export function PDFOutput() {
    return (
        <Document>
          <Page>
            <Text style={styles.customText}>Testing</Text>
          </Page>
        </Document>
    )
}

3. 检查react-pdf版本兼容性 #

不同版本的react-pdf对样式处理存在差异，比如v3.x版本部分样式属性写法有调整。确认项目依赖版本与官网Playground一致：

• 查看项目package.json中的@react-pdf/renderer版本
• 若版本差异较大，尝试升级/降级至官网使用的最新稳定版

4. 为Page组件添加基础样式 #

Page组件默认无内边距，可能导致Text紧贴边缘看起来样式未生效，尝试添加内边距：

<Page style={{ padding: 30 }}>
  <Text style={styles.customText}>Testing</Text>
</Page>

5. 确认组件导入路径正确 #

确保所有组件都从@react-pdf/renderer正确导入，避免导入同名错误包：

// 正确导入
import { Document, Page, Text, PDFViewer } from '@react-pdf/renderer';

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