Why are styles from react-syntax-highlighter/dist/esm/styles/prism not working as expected?

Question

this my code

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>
  );
};

when i want to use vscDarkPlus style i get picture like this

Why are styles from react-syntax-highlighter / dist / esm / styles / prism not working as expected ?

Answer 1

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