title: How to prevent outside CSS from adding and overriding ReactJS component styles
body: <p>I have a custom ReactJS component that I want to style in a certain way and provide as a plugin to many different web sites. But when web sites use global styles (Twitter bootstrap or another css framework) it adds and overrides styles of my component. For example:</p>
  
  <p>global.css:</p>
  
  <pre><code>    label { 
          color: red;
          font-weight: bold;
       }
  </code></pre>
  
  <p>component.js:</p>
  
  <pre><code>class HelloMessage extends React.Component {
    render() {
        let style = {
            color: "green"
        };
      return (&lt;label style={style}&gt;Hello&lt;/label&gt;);
    }
  }
  </code></pre>
  
  <p>result:</p>
  
  <p><a href="https://i.stack.imgur.com/TeeFr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TeeFr.png" alt="enter image description here"></a></p>
  
  <p><strong>Above I didn't use "font-weight: bold" in my component's style but in result my component is using it.</strong></p>
  
  <p>I'd like to be able to encapsulate <strong>my custom components's styles in a way that makes them look the same across all the web sites</strong>. </p>