Shield React组件从外部样式 [英] Shield React Component from outside styles

问题描述

不是一个特定于React的问题，但是如何确保一个反应组件的样式不会受到嵌入其中的任何页面的影响。

Not really a question specific to React, but how would one ensure the styles of a react component are not affected by whatever page they are embedded in.

在时刻，我将一个反应组件嵌入页面（不是单页面反应应用程序），并有一些全局样式，搞乱了库的ui。希望修复实际的React库而不是改变我的代码来减轻这个。

At the moment, I'm embedding a react component into a page (not single page react app) and have some global styles that are messing with the ui of the library. Was hoping to fix the actual React library rather than alter my code to mitigate this.

推荐答案

查看此 react-iframe 。

使用

var Iframe = require("react-iframe");
<Iframe url="http://www.example.com" [string width, [string height]] />

主要想法是将您的组件包装在一个iframe中，这将减轻父节点的所有冲突问题页。作者撰写了一篇关于此方法的好处的博文，他是如何实施的。

The main idea is to wrap your component within an iframe which will mitigate all the conflicting issues with the parent page. The author wrote a blog post on the benefit of this approach and how he has implemented it.

这篇关于Shield React组件从外部样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！