katex 数学在反应中没有完美呈现答案

【问题标题】：katex math is not rendering perfectly in reactkatex 数学在反应中没有完美呈现
【发布时间】：2021-10-24 12:18:41
【问题描述】：

反应代码

import React from "react";
import katex from "katex/dist/katex.mjs";
export default function App() {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: katex.renderToString("\\sum_{i=0}^{n-1}A[i]"),
      }}
    />
  );
}

`/public/index.html`

包含的样式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css" integrity="sha384-zTROYFVGOfTw7JV7KUu8udsvW2fx4lWOsCEDqhBreBwlHI4ioVRtmIvEThzJHGET" crossorigin="anonymous">

输出

预期输出

谁能告诉我这是什么错误？

【问题讨论】：

你确定这是 React 的问题吗？你试过用纯 HTML/JS 渲染它吗？
当我尝试使用plaint html/css时也会出现此问题。

标签： css katex

【解决方案1】：

回答我的问题

const html = katex.renderToString(str, {
    throwOnError: false,
    displayMode: true // make it true
})

.katex-display,.katex-display > .katex, .katex-display > .katex > .katex-html {
  display: inline !important;
  // make it inline, so it can render with your text even after `displayMode:true`
}

.katex-display{
    text-align:left !important;
}
.katex-display>.katex{
    text-align:left !important;
}

【讨论】：