mhs.us
PD🧩 Plasmo Developers
•Created by mhs.us on 11/30/2023 in #👾extension
Ant-design elements are affected by CSS on different websites, how do I fix this?
Hello everyone, I have implemented the drawer menu of ant-design on google.com and github.com. However, it seems like the css of github has affected the "Some contents..." <p> element inside the drawer menu on github. The problem is fixed when I delete the <head> on github.com. From this, I understand that the css of github is affecting my shadowdom. How can I solve this?
Please check out the video attached.
Code source:
import { Button, Modal, App, Space } from "antd"
import { useState } from "react"
import ConfigProvider from "antd/es/config-provider"
import type { ReactNode } from "react"
import type { PlasmoGetShadowHostId } from "plasmo"
import { StyleProvider } from "@ant-design/cssinjs"
import { message, Popconfirm, Drawer } from 'antd';
export const getShadowHostId: PlasmoGetShadowHostId = () => plasmo-shadow-container
export const ThemeProvider = ({ children = null as ReactNode }) => (
<ConfigProvider
getPopupContainer={() => document.getElementById("plasmo-shadow-container")?.shadowRoot as any}
>
{children}
</ConfigProvider>
)
function PlasmoOverlay({ children }) {
const [open, setOpen] = useState(false);
console.log('HEYY: ', document.getElementById("plasmo-shadow-container")?.shadowRoot)
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
return (
<ThemeProvider>
<StyleProvider container={document.getElementById("plasmo-shadow-container").shadowRoot}>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
<Drawer mask={false} title="Basic Drawer" placement="right" onClose={onClose} open={open}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</StyleProvider>
{children}
</ThemeProvider>
)
}
export default PlasmoOverlay2 replies