🧩 Plasmo Developers�PD
🧩 Plasmo Developers•16mo ago•
1 reply
N1rvana

Cannot get Chakra-UI to render on Content

Hi I was trying to make a sidepanel overlay using plasmo to track my leetcode progress against a weekly goals, and want to use Chakra-UI's progress bar. However, I cannot get the component to render on the side panel. I've provided the code and screenshots below. Content.tsx: 
import { ChakraProvider } from "@chakra-ui/react"
import cssText from "data-text:~style.css"
import type { PlasmoCSConfig } from "plasmo"

import { CountButton } from "~features/count-button"
import { LeetcodePanel } from "~features/LeetcodePanel"

// export const config: PlasmoCSConfig = {
//   matches: ["https://www.plasmo.com/*"]
// }

const PlasmoOverlay = () => {
  return (
    <ChakraProvider>
      <LeetcodePanel />
      <div className="plasmo-z-50 plasmo-flex plasmo-fixed plasmo-top-32 plasmo-right-8"></div>
    </ChakraProvider>
  )
}

export default PlasmoOverlay
LeetcodePanel.tsx: ```import { ChakraProvider, Progress } from "@chakra-ui/react"
import React from "react"
import { FaMinus } from "react-icons/fa6"
import { IoSettingsOutline } from "react-icons/io5"

export const LeetcodePanel = () => {
return (
<div className="plasmo-fixed plasmo-top-3 plasmo-bottom-3 plasmo-right-0 plasmo-rounded-lg plasmo-h-100 plasmo-w-80 plasmo-bg-gray-800 plasmo-text-white plasmo-z-50 plasmo-shadow-lg">
<div className="plasmo-p-4">
<div id="lc-header" className="plasmo-flex plasmo-justify-between">
<div className="plasmo-font-bold">Leetcode Metrics</div>
<div id="lc-header-options" className="plasmo-flex plasmo-space-x-4">
{/* Settings Icon /}
<div className="plasmo-cursor-pointer">
<IoSettingsOutline />
</div>
{/ Minimize Icon */}
<div className="plasmo-cursor-pointer">
<FaMinus />
</div>
</div>
</div>
<div>
<Progress value={80} colorScheme="blue" />
</div>
</div>
</div>
)
}
image.png
Was this page helpful?