react-markdown 使用 rehype-katex，解决锚点跳转后渲染异常

情景描述

在 react 应用中使用 react-markdown 渲染 markdown，并选用 remark-math 和 rehype-katex 来解析和渲染数学公式。

import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import "katex/dist/katex.min.css";

// 简化和省略了无关代码
function Md({ children }: MdProps) {
  return (
    <Markdown
      remarkPlugins={[remarkMath]}
      rehypePlugins={[rehypeRaw, rehypeKatex]}
    >
      {children}
    </Markdown>
  )
};

能正常渲染数学公式。但当我想要实现锚点跳转时，指定 markdown 中某个元素的 id，并用链接进行跳转，点击后整个页面的文档流异常，markdown 跑到了最顶端，页头等元素消失。

const text = `
# Render math in react-markdown

## Menu

- [Installation](#Installation)

<h2 id="Installation">Installation</>
`
export default App() {
  return <Md>{text}</Md>;
}

解决方案

经过初步排查，问题出在 katex/dist/katex.min.css 第 158 行起的部分：

.katex .katex-mathml {
  /* Accessibility hack to only show to screen readers
   Found at: http://a11yproject.com/posts/how-to-hide-content/ */
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

看注释意思大概是隐藏元素，但因为无障碍支持需要其保留在文档树中。此外，渲染出来的公式由2个部分组成，一个是类名为 katex-mathml，另一个为 katex-html。不考虑无障碍友好，隐藏一个，并保证另一个正常即可。
创建并引入一个新的 css 文件（overrides.css），用一些设置覆盖效果

span.katex {
  & span.katex-mathml {
    position: inherit;
  }

  & span.katex-html[aria-hidden="true"] {
    display: none;
  }
}

或者：

span.katex {
  & span.katex-mathml {
    display: none;
  }
}

这两种仅仅是字体上的区别。此时，锚点跳转后渲染正常，且数学公式也被正常渲染。
本文的解决方案仅供参考，不一定适用任何项目。