🧩 Plasmo Developers•2w ago

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

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

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Cannot get Chakra-UI to render on Content