Shield React Component from outside styles

Question

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.

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.

Answer 1

Take a look at this react-iframe.

Usage

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

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.