Ant-design elements are affected by CSS on different websites, how do I fix this?

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

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 PlasmoOverlay