MUI styles with PlasmoGetInlineAnchorList
Styles are added only for last shadow-root.
Please tell me how to make it work.
// Plasmo
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { Button } from "@mui/material";
import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo"
export const config: PlasmoCSConfig = {
matches: ["https://plasmo.com/*"],
};
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
const anchors = document.querySelectorAll(".myClass")
return Array.from(anchors).map((element) => ({
element,
insertPosition: "beforeend",
}))
};
const styleElement = document.createElement("style")
const styleCache = createCache({
key: "plasmo-mui-cache",
prepend: true,
container: styleElement
})
export const getStyle = () => styleElement
const MyButton = () => {
return (
<CacheProvider value={styleCache}>
<Button>
My Button
</Button>
</CacheProvider>
)
}
export default MyButton
Please tell me how to make it work.
// Plasmo
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { Button } from "@mui/material";
import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo"
export const config: PlasmoCSConfig = {
matches: ["https://plasmo.com/*"],
};
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
const anchors = document.querySelectorAll(".myClass")
return Array.from(anchors).map((element) => ({
element,
insertPosition: "beforeend",
}))
};
const styleElement = document.createElement("style")
const styleCache = createCache({
key: "plasmo-mui-cache",
prepend: true,
container: styleElement
})
export const getStyle = () => styleElement
const MyButton = () => {
return (
<CacheProvider value={styleCache}>
<Button>
My Button
</Button>
</CacheProvider>
)
}
export default MyButton
