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
export const getStyle = () => styleElement const MyButton = () => {
return ( <CacheProvider value={styleCache}> <Button> My Button </Button> </CacheProvider> ) } export default MyButton
1 Reply
const MyButton = ({ anchor }) => {
const styleCache = createCache({
key: "plasmo-mui-cache",
prepend: true,
container: anchor.element.querySelector('plasmo-csui').shadowRoot,
})
Works for me, don't know if it is a best solution