Подсветка синтаксиса реакции не работает с TailwindCSS

Question

Я показываю содержимое блока здравомыслия, используя [@sanity/block-content-to-react](@sanity/block-content-to-react). Компонент BlockContent является оболочкой div с классом «проза».

       <div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none dark:prose-invert ">
     <BlockContent
         // Pass in block content straight from Sanity.io
          blocks={singleBlog.body}
          serializers={serializers}
      />
 </div>

В моих сериализаторах я передаю пользовательский<Code/>компонент.

        const serializers = {
    types: {
      code: (props) => <Code props={props} />,
    },
  };

В моем пользовательском компоненте кода я использую Syntax Highlighter для переноса содержимого кода.

            <SyntaxHighlighter style={theme} language={props.node.language}>
        {props.node.code}
      </SyntaxHighlighter>

Но независимо от того, какую тему я выберу, она меняет только цвета фона и размер шрифта, но не влияет на цвета текста.

Я думал, что класс «проза» в обертке div вызывает проблему. Но удалить это тоже не помогло.

                {/* <div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none   dark:prose-invert "> */}
          <BlockContent
            // Pass in block content straight from Sanity.io
            blocks={singleBlog.body}
            serializers={serializers}
          />
          {/* </div> */}

У кого-нибудь есть решение?

Answer 1

Я не уверен, используете ли вы пользовательскую тему или используете один из многих вариантов. Но если вы используете доступную версию, которую вы можете найти здесь: https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html .

Тогда это может быть проблема с вашим импортом.

Если я импортирую такую ​​тему (используя hljs ):import {dark} from "react-syntax-highlighter/dist/esm/styles/hljs";Я получаю только цвет фона.

Если я импортирую такую ​​тему, используя параметр «призма», я также получаю цвет текста:import {dark} from "react-syntax-highlighter/dist/esm/styles/prism";