ink Comments - Answer Overflow

ink

•Created by Daluxe on 11/2/2023 in #👟framework

How to use shadcn-ui stylings in content script?

the content.tsx code:

import cssText from "data-text:~style.css"
// i have import

export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText.replaceAll(':root', ':host(plasmo-csui)');
    return style
}
export const config: PlasmoCSConfig = {
    matches: ["*://*.bing.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
    element: document.querySelector("#b_context"),
    insertPosition: "afterbegin"
})

const PlasmoCSUI = () => {

    // ……some code
    return (

            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <div className="pb-8 w-full">
                    <span className="text-red-700 text-3xl">
                    AtMyNotion

                    </span>
                        <NotionStatus/>

                        <ATMSpaceSwitcher/>
                        <ATMSwitch
                            id="Advanced-search-mode"
                            label="Search with Filters"
                            onChange={handleSwitchChange}>
                            <ATMPopover
                                tooltipContent={
                                    "Apply advanced filters and sorting on the search page."
                                }>
                                <CircleHelp className="h-4 w-4 text-slate-400"/>
                            </ATMPopover>
                        </ATMSwitch>
                    </div>
                </PersistGate>
            </Provider>
    )
}

export default PlasmoCSUI

import cssText from "data-text:~style.css"
// i have import

export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText.replaceAll(':root', ':host(plasmo-csui)');
    return style
}
export const config: PlasmoCSConfig = {
    matches: ["*://*.bing.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
    element: document.querySelector("#b_context"),
    insertPosition: "afterbegin"
})

const PlasmoCSUI = () => {

    // ……some code
    return (

            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <div className="pb-8 w-full">
                    <span className="text-red-700 text-3xl">
                    AtMyNotion

                    </span>
                        <NotionStatus/>

                        <ATMSpaceSwitcher/>
                        <ATMSwitch
                            id="Advanced-search-mode"
                            label="Search with Filters"
                            onChange={handleSwitchChange}>
                            <ATMPopover
                                tooltipContent={
                                    "Apply advanced filters and sorting on the search page."
                                }>
                                <CircleHelp className="h-4 w-4 text-slate-400"/>
                            </ATMPopover>
                        </ATMSwitch>
                    </div>
                </PersistGate>
            </Provider>
    )
}

export default PlasmoCSUI

27 replies

PD🧩 Plasmo Developers

•Created by Daluxe on 11/2/2023 in #👟framework

How to use shadcn-ui stylings in content script?

@Arvin @nithur Hello, I have the same problem with the SelectContent component and popover component that display shadcn in contentui. I found that the "SelectContent" appears outside plasmo-csui, which prevents the correct style from being displayed. How did you solve it? Any possible help is greatly appreciated The popover in the popup can be displayed correctly, !image In contentui, the surface element can be displayed correctly, but the floating element popover contained inside cannot be displayed correctly !image

27 replies

Gaming

Programming