我如何将Bootstrap框架的范围限制为仅在一个CSS ID下“应用”？

Question

我正在编写一个Chrome扩展程序，该扩展程序在任何页面的顶部添加了一个“控制台” div，允许用户查看有关该页面的“元”信息。在这种情况下，扩展名将显示有关用户悬停的汉字的信息。

该插件的基本原理是，它将div注入页面，然后向该div渲染一个react应用。扩展程序应用程序是右侧的黄色栏：

我想在扩展应用程序中使用某种CSS框架，最好是通过React-Bootstrap进行Bootstrap。但是，当我通过import 'bootstrap/dist/css/bootstrap.min.css'将库添加到我的react应用程序中时，css会影响整个网页，而不仅仅是我的应用程序。出于明显的原因，这很糟糕，因为用户访问的每个页面都会受到此CSS的影响。

所以我的问题是我有一种使用CSS框架（引导程序）的方式，它只会影响我的react App吗？确定它范围或重新构建的某种方法？

例如，这就是扩展名中带有CSS的NPM主页的外观。它完全失真：

没有它：

Answer 1

我相信this answer可能就是您想要的。不幸的是，iframe可能是唯一的方法。