javascript - 文档样式正在注入注入的弹出窗口

Question

首先，我在这里搜索了各种帖子，但没有任何效果。定义all: initial或all: unset什么都不做。我也尝试过 shadowDOM，但样式仍在其中。目前，我正在为我的样式使用情感，它在所有内容前面加上我的应用名称，以使所有内容都独一无二。在大多数网站上一切正常，但像 stackoverflow 这样的一些网站针对的body, html字体大小似乎渗入了我注入的弹出窗口。

这是我的 inject.js 文件，我将元素注入到网站 DOM 中

import App from './App'

const ExtensionApp = styled.div`
  font-size: 16px;
  position: fixed;
  right: 10px;
  top: 15px;
  width: 320px;
  z-index: 2147483647;
`

const Index = () => {
  return (
   <ExtensionApp>
    <App />
   </ExtensionApp>
 )
}

  const rootElement = document.createElement('div')
  rootElement.id = 'myApp-extension-root'
  const root = document.body.appendChild(rootElement)

  const stylesElement = document.createElement('div')
  stylesElement.id = 'myApp-extension-styles'
  const styles = document.body.appendChild(stylesElement)

  const myCache = createCache({
    key: 'myApp',
    container: styles
  })

ReactDOM.render(
  <CacheProvider value={myCache}>
    <Index/>
  </CacheProvider>, root)

现在我尝试将这些样式放在根 id 上，myApp-extension-root但仍然没有。我只是迷路了，我不明白如何解决这个问题。我找到的唯一解决方案是将它包装在 iframe 中，但我无法让 iframe 增长到它的内容，无论我做什么，它都会保持相同的宽度/高度。所以 iframe 对我来说是最后的手段。

编辑：

检查将跨度包装3rem为字体大小的 div，计算出的大小为 39px

• 3rem !important .myApp-riwa84
• 100% html、body、div、span、applet、object、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、abbr、首字母缩略词、地址、大、引用、代码、del、 dfn, em, img, ins, kbd, q, s, samp, 小, 罢工, 强, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,字段集，表单，标签，图例，表，标题，tbody，tfoot，thead，tr，th，td，文章，放在一边，画布，细节，嵌入，图，figcaption，页脚，标题，hgroup，菜单，导航，输出，红宝石, 部分, 摘要, 时间, 标记, 音频, 视频
• 16px .myApp-1na1ypp
• 13px html，正文

在此跨度的样式下

• 字体大小：16px；
• 位置：固定；
• 右：10px；
• 顶部：15px；
• 宽度：320 像素；
• z-index：2147483647；
• 字体系列：蒙特塞拉特，-apple-system，BlinkMacSystemFont，“Segoe UI”，Roboto，Oxygen-Sans，Ubuntu，Cantarell，“Helvetica Neue”，Helvetica，无衬线！重要；

跨度本身有

.myApp-riwa84 {
    all: initial !important;
    font-size: 3rem !important;
}

标签： javascriptcssreactjsgoogle-chrome-extensionemotion