由于使用 Chakra UI 及其全局范围性质，我的 react 项目中的富文本编辑器样式问题

问：

我需要有关富文本编辑器的帮助，我在基于 Chakra 的 react 项目中使用的它。实际上，我用于项目的 react 库继承了 ChakraProvider 定义的属性，即使我在 ChakraProvider 的范围之外声明了 TextEditor 组件。

我尝试使用 resetScope 和 disableGlobalScope，但之后样式会受到干扰。

import { Box, ChakraProvider } from "@chakra-ui/react";
import "./App.css";
import TextEditor from "./DocsGenerator/TextEditor";
import NavBar from "./NavigationBar/NavBar";
import Hero from "./HeroComponent/Hero";
import FooterContent from "./Footer/FooterContent";

function App() {
  const htmlContent = `<h1 style="text-align:center;">Document</h1>


  
  <p><strong>Note:</strong>hi</p>`;

  return (
    <>
      <ChakraProvider>
        <NavBar />
        <Hero />
        <FooterContent></FooterContent>
      </ChakraProvider>

      <TextEditor generatedContent={htmlContent}></TextEditor>
    </>
  );
}

export default App;


//This is TextEditor comp

import { useState } from "react";
import Jodit from "jodit-react";

interface Props {
  generatedContent: string;
}

const TextEditor = ({ generatedContent }: Props) => {
  const [content, setContent] = useState(generatedContent);
  return (
    <div>
      <Jodit
        className="jodit-component"
        value={content}
        onChange={(value) => setContent(value)}
      />
    </div>
  );
};

export default TextEditor;