如何在React JS中修改react-mathjax-preview的字号与字体

你无需修改node_modules内的包源码，直接通过CSS覆盖默认样式即可实现需求，常用两种方案： #

方案1：全局覆盖，所有公式统一生效 #

在项目全局CSS文件（如App.css、global.css）中添加以下样式：

/* 适配所有MathJax渲染的公式 */
.MathJax {
  font-size: 20px !important; /* 按需调整具体数值 */
  font-family: "Times New Roman", serif !important; /* 替换为目标字体 */
}

如果需要区分行内公式和块级公式的样式，可以分别设置：

/* 行内公式样式 */
.MathJax_inline {
  font-size: 18px !important;
}
/* 块级公式样式 */
.MathJax_display {
  font-size: 24px !important;
}

方案2：局部生效，不污染其他位置公式 #

如果只需要修改特定位置的公式样式，可以给父容器添加自定义类名限定样式作用范围：

第一步：修改JSX代码 #

<h5 
  className="custom-math-wrapper"
  style={{textAlign: "center", textOverflow: "ellipsis"}}
>
  <MathJax math={`$$\lim_{x \to \infty} \exp(-x) = 0$$`} />
</h5>

第二步：添加对应CSS样式 #

.custom-math-wrapper .MathJax {
  font-size: 20px !important;
  font-family: "目标字体名称", sans-serif !important;
}

注意：!important用于覆盖MathJax默认的内联样式优先级，若你自定义样式的优先级高于默认规则，可以省略该字段。

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