Plasmo Chakra UI Modal

modal.tsx

import Calendar from "~components/Calendar"
import { useEffect, useRef, useState } from "react"
import cssTextFcDaygrid from "data-text:@fullcalendar/daygrid/main.css"
import cssTextFcCommon from "data-text:@fullcalendar/common/main.css"
import cssTextFcTimegrid from "data-text:@fullcalendar/timegrid/main.css"
import cssTextGlobals from "data-text:~styles/globals.css"
import {
  ChakraProvider,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalOverlay
} from "@chakra-ui/react"
import createCache from "@emotion/cache"
import { CacheProvider } from "@emotion/react"

export const config = {
  matches: ["https://mail.google.com/mail/*"]
}
const styleElement = document.createElement("style")

const styleCache = createCache({
  key: "plasmo-emotion-cache-modal",
  prepend: true,
  container: styleElement
})

styleCache.sheet.insert(cssTextFcTimegrid)
styleCache.sheet.insert(cssTextFcCommon)
styleCache.sheet.insert(cssTextFcDaygrid)
styleCache.sheet.insert(cssTextGlobals)

export const getStyle = () => styleElement

const container = document.createElement("div")
const shadowHost = document.createElement("div")
const shadowRoot = shadowHost.attachShadow({ mode: "closed" })
document.body.insertAdjacentElement("beforebegin", shadowHost)
shadowRoot.appendChild(getStyle())
shadowRoot.appendChild(container)
export const getRootContainer = () => {
  return container
}

Commenting to follow this