Semantic-UI-React Footer

Question

Ich habe ReactJS in den letzten paar Tagen gelernt und habe versucht, eine Website mit semantic-ui-react in ReactJS zu bauen. Ich verstehe, dass es Komponenten gibt, die man jetzt benutzen kann, aber ich stecke fest, was in einem Szenario wie der Erstellung einer Fußzeile zu tun ist ... normalerweise würde ich in meinem rohen HTML die semantic.min.css Datei enthalten und ganz unten:

<div class="ui inverted pink vertical footer segment"> 
     <div class="ui center aligned container"> 
      <h4 class="ui inverted header">&copy; Copyright 2017 | All rights reserved | Blahhh</h4> 
      <a href="https://www.facebook.com/"><i class="facebook square icon big"></i></a> 
      <a href="https://twitter.com/"><i class="twitter square icon big"></i></a> 
      <a href="https://www.linkedin.com/company/c"><i class="linkedin square icon big"></i></a> 
     </div> 
    </div> 

Jetzt möchte ich dies in semantic-ui-react übersetzen. Footer ist eine Klasse und keine Komponente, die standardmäßig reagiert, also gibt es keine Komponente dafür. Was ich voraussetze, bedeutet, dass ich meine eigene Komponente erstellen muss und grundsätzlich den obigen Code schreibe. Mein Problem ist jetzt, dass ich nicht weiß, wie man es rendern lässt, als ob ich reguläre alte semantic.min.css benutze. Ich lese irgendwo die CSS-Datei und lade sie ein, aber eine, ich weiß nicht, wo ich (MyCustomFooterComponent oder index.html), und dabei, bin ich nicht durch Ladezeiten auf meiner Website erhöhen. Würde das bedeuten, dass es überall eine Fußzeile gibt, nur für einen kleinen Bereich von benutzerdefiniertem Code, wird die gesamte CSS-Datei geladen?

Auch nach dem Erstellen, würde es ein Doppel-Import-Szenario aus meiner Addition des Semantic CSS und semantic-ui-react 's CSS?

Sorry für die lange Frage, aber ich bin neu und ich mag es herauszufinden, was ich kann, bevor ich einen schrecklichen Fehler mache.

Answer 1

Wenn Sie react-semantic-ui verwenden, dann enthalten Sie bereits 'die alte semantic-ui.min.css'. Siehe here.

Also erstellen Sie eine Komponente und setzen Sie diesen Code in render(), ändern Sie "class" in "className" und verwenden Sie es dann.