Using pre-existing component library in CSUI

[Anlanther]

I am trying to create an overlay with components from MUI (https://mui.com/) and tried using the with-content-scripts-ui project within the examples-main, however they do not seem to render, but I do see that it is appearing in the devTools. My wonder is if this is due to the use of a Shadow DOM?

Here is my result adding the button into the existing overlay anchor using the example project:

Here is my code, just editing the plasmo-overlay-watch.tsx file in the examples-main project. I have changed nothing else apart from just installing the react material components:

In other projects, I have also noticed Parcel's interesting behaviour with component libraries in the fact that even if you do not use the component provided by the installed library, it would still look for it.

E.g. 1: I had an issue with npm i @mui/material, as even though I was only using <Button />, the build stopped due to error of not finding @emotion/react, as I didn't use the full npm install @mui/material @emotion/react @emotion/styled command

E.g. 2: In another instance, I installed another component library that had a bug in its <DatePicker /> component, but only used its <Header />, but the build failed due to the bug with <DatePicker />

[louisgv]

You need to mount their styles

[HoncharenkoOleksandr]

How to do it?

[Junk-debug]

probably you should get something like this

import cssAsText from "data-text:<path-to-library-styles.css>"
// for example node_modules/mui/.../dist/styles.css
// i dont know where is default mui styles located

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style");
  style.textContent = cssAsText;
  return style;
};