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 PlasmoOverlay1 Reply
Hello everyone,
I think ant-design uses a CSS file, as mentioned in this example https://github.com/PlasmoHQ/examples/blob/main/with-antd/content.tsx, to reset its elements in the shadow DOM called reset.css. This didn't work for me, but I added
:host {
all: initial; /* subsequent properties are reset. */
}
to the beginning of this CSS file, and the error has been corrected. Now, no site is breaking my antdesign content script. Is this the right method?