这并不是一个特定于 React 的问题，而是如何确保 React 组件的样式不受它们嵌入的任何页面的影响。
目前，我正在将一个 React 组件嵌入到一个页面(而不是单页 React 应用程序)中，并且有一些全局样式会扰乱库的用户界面。希望修复实际的 React 库而不是更改我的代码来缓解这种情况。
最佳答案
看看这个react-iframe .
用法
var Iframe = require("react-iframe");
<Iframe url="http://www.example.com" [string width, [string height]] />
主要想法是将您的组件包装在一个 iframe 中，这将减轻与父页面的所有冲突问题。作者写了一个blog post关于这种方法的好处以及他是如何实现的。
关于css - 从外部样式屏蔽 React 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35559294/