How to isolate CSS in Chrome extension?

Question

Web development

I'm making an extension for Google Chrome - a pop-up window in the center of the page. I haven't developed chrome extensions before. The extension is made with React.js. The popup is made using the Dialog component from material-ui.
The main problem is that site styles affect the display of elements in the extension. How can you get rid of this?
I see 3 possible solutions to the problem:
1) Shadow Dom. I tried to create an element and call react render in it, and then register this element. Chrome gave an error that you can't register an element from an extension.
2) Use iframe. That's just why React doesn't render inside an iframe.
3) Reset styles with some reset.css.
The second problem - I tried to add bootstrap to the extension, but its styles are also applied to sites. I connect it like this:

"content_scripts": [
       {
           "matches": ["<all_urls>"],
           "css": ["styles.css", "bootstrap.min.css"],
           "js": ["content.js"]
       }
   ],

Is it possible to make bootstrap only apply to extension elements?
Thanks in advance for your reply!

Answer 1

Alexey Yarkov : Tried resetting styles, but it's a bad decision. I settled on a solution with an iframe. The isolation works.
React didn't render it for me because the code for rendering children - this.props.children - was not added to the render function of the component in which I placed the iframe.
This is how it works:

<iframe>
    <span>Text in Iframe</span>
</iframe>

You can also write in the component like this:
In order to get a link to files through chrome.extension.getURL(), you need to write in the manifest

"web_accessible_resources": [
       "frame.html",
       "frame-styles.css"
   ]

I used the first method and this component - https://github.com/pqx/react-frame , to give it a css file.