为什么 react-syntax-highlighter/dist/esm/styles/prism 中的样式不能按预期工作？

Question

这是我的代码

import SyntaxHighlighter from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";

const App = () => {
  const x = `
  for (let i = 0; i < haystack.length; i++) {
    if (!haystack[i] === needle) return;
  }
  `;
  return (
    <SyntaxHighlighter
      language="javascript"
      style={vscDarkPlus}
      showLineNumbers={true}
      codeTagProps={{ style: { fontSize: "inherit" } }}
      customStyle={{ fontSize: 18 }}
    >
      {x}
    </SyntaxHighlighter>
  );
};

当我想使用 vscDarkPlus 风格时，我会得到这样的图片

为什么 react-syntax-highlighter / dist / esm / styles / prism 中的样式无法按预期工作？

Answer 1

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";