Injecting both Emotion cache AND local css
Howdy,
I am missing a piece in my understanding. I have added the MUI css using the following script:
import createCache from "@emotion/cache"
import {CacheProvider} from "@emotion/react"
const styleElement = document.createElement("style")
const styleCache = createCache({
key: "plasmo-mui-cache",
prepend: true,
container: styleElement
});
export const getStyle: PlasmoGetStyle = () => styleElement;
But I am also trying to add a local css and I cannot figure out how to do both. All of the examples seem to do one or the other. I've tried to create another component that adds the local with the following code:
import cssText from "data-text:./MySidebar.css"
export const getStyle: PlasmoGetStyle = () => {
const style = document.createElement("style")
style.textContent = cssText
console.log('$$ MySidebar getStyle $$ style', style)
return style
}
But it does not load into the page.
Any help?
I am missing a piece in my understanding. I have added the MUI css using the following script:
import createCache from "@emotion/cache"
import {CacheProvider} from "@emotion/react"
const styleElement = document.createElement("style")
const styleCache = createCache({
key: "plasmo-mui-cache",
prepend: true,
container: styleElement
});
export const getStyle: PlasmoGetStyle = () => styleElement;
But I am also trying to add a local css and I cannot figure out how to do both. All of the examples seem to do one or the other. I've tried to create another component that adds the local with the following code:
import cssText from "data-text:./MySidebar.css"
export const getStyle: PlasmoGetStyle = () => {
const style = document.createElement("style")
style.textContent = cssText
console.log('$$ MySidebar getStyle $$ style', style)
return style
}
But it does not load into the page.
Any help?
