React项目中KaTeX数学公式渲染异常问题求助

云上老周

2026-9-29

问题原因

你当前渲染效果不符合预期的核心原因是没有开启KaTeX的显示模式（Display Mode）：
KaTeX默认使用行内模式渲染公式，这种模式下求和、积分等大型运算符的上下标会默认展示在符号右侧，用来适配和普通文本混排的场景，减少行高波动；你预期的效果是块级公式的渲染效果，需要手动开启显示模式。

解决方法

给katex.renderToString方法传入第二个配置参数，开启displayMode即可，修改后的代码如下：

import React from "react";
import katex from "katex/dist/katex.mjs";
// 也可以选择在JS中直接引入KaTeX样式，和index.html引入二选一即可
// import "katex/dist/katex.min.css";

export default function App() {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: katex.renderToString("\\sum_{i=0}^{n-1}A[i]", {
          displayMode: true, // 核心配置：开启块级显示模式
          throwOnError: false // 可选配置：渲染出错时展示错误文本，不抛出运行时异常
        }),
      }}
    />
  );
}