Wie verhindern, dass außerhalb CSS ReactJS-Komponentenstile hinzufügen und überschreiben

Question

Ich habe eine benutzerdefinierte ReactJS-Komponente, die ich in einer bestimmten Weise stylen und als Plugin für viele verschiedene Websites bereitstellen soll. Wenn Websites jedoch globale Stile verwenden (Twitter-Bootstrap oder ein anderes CSS-Framework), werden Stile meiner Komponente hinzugefügt und überschrieben. Zum Beispiel:

global.css:

label { 
     color: red; 
     font-weight: bold; 
    } 

component.js:

class HelloMessage extends React.Component { 
    render() { 
     let style = { 
      color: "green" 
     }; 
    return (<label style={style}>Hello</label>); 
    } 
} 

Ergebnis:

Above ich nicht „nicht genutzt font- Weight: fett "im Stil meiner Komponente, aber im Ergebnis, das meine Komponente verwendet es.

Ich möchte die Stile meiner benutzerdefinierten Komponenten so einkapseln, dass sie auf allen Websites gleich aussehen.

Answer 1

Der beste Ansatz ist aus meiner Sicht eine Art Reset-Klasse für die Komponente und in einer Reihe von CSS setzen definieren zurücksetzt Sie dort finden können (zB http://meyerweb.com/eric/tools/css/reset/)

Die Definition in einer sass Datei konnte wie folgt aussehen:

.your-component-reset { 
    div, span, object, iframe { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-weight: normal; 
     font-size: 100%; 
     font: inherit; 
     vertical-align: baseline; 
    } 
    // add some more reset styles 
} 

zu vermeiden, um viel zu schreiben, wenn Sie nicht sass wollen nur verwenden, um den universellen Selektor *: