为什么来自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-语法-荧光笔/ dist / esm /style/ prism的样式不能按预期工作？

Answer 1

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