如何修改react-native-mathjax组件默认白色背景色？

你当前设置hasIframe={true}，MathJax会将公式渲染在独立的iframe中，之前配置的styles仅作用于公式所在的#formula元素，但iframe的body背景色未被修改，因此仅公式区域变色，整体背景未改变。以下是两种可行解决方案：

方案一：调整mathJaxOptions中的样式规则 #

直接在styles中添加对body元素的样式设置，覆盖iframe内部的body背景色，同时修正公式文字颜色（避免深色背景下文字不可见）：

const mmlOptions = {
  styles: {
    'body': {
      'background-color': '#212121',
      margin: 0,
      padding: 8,
    },
    '#formula': {
      color: '#ffffff', // 深色背景下改用浅色文字，提升可读性
    },
  },
  messageStyle: 'none',
  extensions: ['tex2jax.js'],
  jax: ['input/TeX', 'output/HTML-CSS'],
  tex2jax: {
    inlineMath: [
      ['$', '$'],
      ['\\(', '\\)'],
    ],
    displayMath: [
      ['$$', '$$'],
      ['\\[', '\\]'],
    ],
    processEscapes: true,
  },
  TeX: {
    extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js'],
  },
};

// 组件使用时移除color属性，内部样式会覆盖该外部设置
<MathJax
  html={props?.tnode?.init?.domNode?.children[0].data}
  mathJaxOptions={mmlOptions}
  hasIframe={true}
  enableBaseUrl={true}
/>

方案二：自定义完整HTML内容 #

如果方案一不生效，可以直接传入包含全局样式的完整HTML字符串，完全控制iframe内部的渲染环境：

// 拼接包含全局样式的完整HTML
const formulaHtml = `
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #212121;
      padding: 8px;
      margin: 0;
      overflow: hidden;
    }
    #formula {
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div id="formula">${props?.tnode?.init?.domNode?.children[0].data}</div>
</body>
</html>
`;

// 组件配置简化，移除mathJaxOptions中的styles
<MathJax
  html={formulaHtml}
  mathJaxOptions={{
    messageStyle: 'none',
    extensions: ['tex2jax.js'],
    jax: ['input/TeX', 'output/HTML-CSS'],
    tex2jax: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']],
      processEscapes: true,
    },
    TeX: {
      extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js'],
    },
  }}
  hasIframe={true}
  enableBaseUrl={true}
/>

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