MUI with content-script-ui
HTML is rendered to the extension, but I have no styles from MUI, How to fix that? I think that is why my extension is isolated from css, but I don't understand how I can add styles from MUI to the content-script
import { Autocomplete, Button, TextField } from "@mui/material"
import iconBase64 from "data-base64:~assets/icon.png"
import cssText from "data-text:~/contents/google-sidebar.css"
import type { PlasmoCSConfig } from "plasmo"
import { useEffect, useState } from "react"
// Inject to the webpage itself
import "./google-sidebar-base.css"
import "./mui.min.css"
export const config: PlasmoCSConfig = {
matches: ["https://www.google.com/*"]
}
// Inject into the ShadowDOM
export const getStyle = () => {
const style = document.createElement("style")
style.textContent = cssText
return style
}
export const getShadowHostId = () => "plasmo-google-sidebar"
const GoogleSidebar = () => {
const [isOpen, setIsOpen] = useState(true)
const [language, setLanguage] = useState<{ label: string } | null>(null)
useEffect(() => {
document.body.classList.toggle("plasmo-google-sidebar-show", isOpen)
}, [isOpen])
return (
<div id="sidebar" className={isOpen ? "open" : "closed"}>
<button className="sidebar-toggle" onClick={() => setIsOpen(!isOpen)}>
{isOpen ? "
Close" : "
Open"}
</button>
<img src={iconBase64} alt="Extension Icon" width={128} height={128} />
<p>The Easiest Way to Build, Test, and Ship browser extensions</p>
<Autocomplete
disablePortal
options={[{ label: "None" }, { label: "English (UK)" }]}
sx={{ width: 210 }}
placeholder="Select language"
value={language}
onChange={(_event, newValue) => setLanguage(newValue)}
renderInput={(params) => (
<TextField {...params} label="Select language" />
)}
/>
<Button>asd</Button>
</div>
)
}
export default GoogleSidebar
import { Autocomplete, Button, TextField } from "@mui/material"
import iconBase64 from "data-base64:~assets/icon.png"
import cssText from "data-text:~/contents/google-sidebar.css"
import type { PlasmoCSConfig } from "plasmo"
import { useEffect, useState } from "react"
// Inject to the webpage itself
import "./google-sidebar-base.css"
import "./mui.min.css"
export const config: PlasmoCSConfig = {
matches: ["https://www.google.com/*"]
}
// Inject into the ShadowDOM
export const getStyle = () => {
const style = document.createElement("style")
style.textContent = cssText
return style
}
export const getShadowHostId = () => "plasmo-google-sidebar"
const GoogleSidebar = () => {
const [isOpen, setIsOpen] = useState(true)
const [language, setLanguage] = useState<{ label: string } | null>(null)
useEffect(() => {
document.body.classList.toggle("plasmo-google-sidebar-show", isOpen)
}, [isOpen])
return (
<div id="sidebar" className={isOpen ? "open" : "closed"}>
<button className="sidebar-toggle" onClick={() => setIsOpen(!isOpen)}>
{isOpen ? "
Close" : " Open"}</button>
<img src={iconBase64} alt="Extension Icon" width={128} height={128} />
<p>The Easiest Way to Build, Test, and Ship browser extensions</p>
<Autocomplete
disablePortal
options={[{ label: "None" }, { label: "English (UK)" }]}
sx={{ width: 210 }}
placeholder="Select language"
value={language}
onChange={(_event, newValue) => setLanguage(newValue)}
renderInput={(params) => (
<TextField {...params} label="Select language" />
)}
/>
<Button>asd</Button>
</div>
)
}
export default GoogleSidebar
