Wie kann ich css Stil auf reagieren Komponente

Question

Ich habe vor kurzem reactjs kennen gelernt und hatte einen Versuch damit. Es gibt viele Komponenten in npm-Repositories, die ich herunterladen und verwenden kann. Allerdings habe ich keinen guten Weg gefunden, um css auf den Elementen innerhalb der Komponente hinzuzufügen. Wie dieses eine reactive-tabs: https://github.com/reactjs/react-tabs. Ich kann es auf meiner Webseite verwenden, aber wie kann ich CSS-Stil auf den Tabs hinzufügen?

Answer 1

Verwendung classname oder Inline-Stil wie

<div className='xxx'></div> 

oder

<div style={{color: 'black'}}></div> 

Answer 2

Wenn Sie react-tabs Quellcode schauen, werden Sie sehen, dass Tab Komponente className als Stütze akzeptiert, so könnten Sie Übergeben Sie Ihren eigenen Klassennamen für Tab-HTML-Element. Es liegt jedoch immer in der Verantwortung des Entwicklers, die Eigenschaftenlogik für seine Komponenten className und style zu implementieren.

Answer 3

Es gibt keine allgemeine Antwort auf diese Frage, außer dass Sie eine Komponente so formatieren, wie Sie ein beliebiges HTML-Element formatieren würden: zum Beispiel class oder ids. Das bedeutet, dass es davon abhängt, wie die Komponente implementiert wird, und dass Sie mindestens die HTML-DOM-Struktur kennen müssen, die von Ihrer Komponente erzeugt wird.

In der Bibliothek, die Sie zur Verfügung gestellt haben, können Sie Ihrer Registerkarte eine className Eigenschaft zuweisen (className in React definiert die class Eigenschaft des produzierten Knotens). Als Ergebnis können Sie <Tab className="my-class" /> schreiben und .my-class verwenden, um Ihre Komponente zu stylen.

Answer 4

Sie können mehrere CSS-Stile auf eine React-Komponente anwenden. unten Reihe von Code Siehe:

var MultipleCss = React.createClass({ 
    getInitialState: function(){ 
    return { 
     score: 20 
    } 
    }, 
render: function() { 

    const starrate = { 
    star:{ 
     clear: 'none', 
     float: 'left', 
     margin: '0px 4px 0px 0px', 
     display: 'block', 
     width: '15px', 
     height: '15px', 
     minWidth: '15px', 
     padding: '0px', 
     cursor: 'pointer', 
     background: 'url(' + 'sprite.png' + ') no-repeat' 
    }, 
    position:{ 
     backgroundPosition: '-257px -147px' 
    }, 
    active: { 
     backgroundPosition: '-235px -147px' 
    } 
    }; 
    return (
    < div> 
     <label style={Object.assign({}, starrate.star, starrate.position)}> </label> 
    </div> 
); 
} 

});

Angenommen, ich möchte css (aktiv) auf Etikett auf der Grundlage einer Bedingung hinzufügen. So können wir wie unten tun:

<label style={Object.assign({}, starrate.star, starrate.position, this.state.score >=20 && starrate.active)}> </label> 

So aktive Klasse wird auf dem Etikett aufgebracht werden, wenn state.score> = 20.