So fügen Sie einen CSS-Stil hinzu, um zu reagieren

Methode hinzufügen: 1. Verwenden Sie „style={{style code}}“, um den CSS-Stil innerhalb der Komponente zu definieren. 2. Erstellen Sie zuerst ein Stilstilobjekt und verwenden Sie dann die Anweisung „style={{object}“. die Komponente der Renderfunktion Zitat 3. Verwenden Sie „import ‚css file path‘“, um externe CSS-Dateien einzuführen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React16-Version, Dell G3-Computer.

Empfohlene Tutorials: React-Video-Tutorial

Im Vergleich zu den drei Methoden zum Referenzieren von CSS in HTML gibt es in React auch drei Methoden nacheinander:

1. Inline-Stil: direkt innerhalb der Komponente definiert

Der Inline-Stil ist die grundlegendste Schreibweise, die dem Inline-Stil ähnelt, den wir geschrieben haben, als wir zum ersten Mal HTML gelernt haben. Er wird in Projekten möglicherweise weniger verwendet.

Verwendung in JSX:

class App extends React.Component {
  // ...
  render() {
    return (
      <div style={{ background: &#39;#eee&#39;, width: &#39;200px&#39;, height: &#39;200px&#39;}}>
        <p style= {{color:&#39;red&#39;, fontSize:&#39;40px&#39;}}>Second Way!</p>
      </div>
    )
  }
}

Es sollte beachtet werden, dass es sich um den CSS-Stil handelt Der Name verwendet hier die Benennung in Kamel-Schreibweise, z. B. Schriftgröße → Schriftgröße, und Sie müssen die CSS-Eigenschaften in doppelte geschweifte Klammern setzen. Warum zwei Zahnspangen verwenden? Da JS-Ausdrücke in JSX gerendert werden, müssen sie in ein Paar geschweifte Klammern eingeschlossen werden. {style} kann als JS-Objekt behandelt werden. Das erste Klammerpaar fügt also den JS-Ausdruck in die JSX-Analyse ein und das darin enthaltene Klammerpaar erstellt eine Stilobjektinstanz. Daher wird der Stil hier als Objekt an die Komponente übergeben

2. Deklarieren Sie den Stil:

Deklarieren Stile sind tatsächlich eine verbesserte Methode zum Schreiben von Inline-Stilen. Erstellen Sie ein Stilobjekt außerhalb der Renderfunktion und übergeben Sie es dann an die Komponente, um das CSS von der Beschriftung zu trennen. Wenn jedoch zu viele Stile vorhanden sind, wird dies immer noch nicht der Fall sein Sehen Sie gut aus.

class App extends React.Component {
 
//...
 
 const style1={    
      background:'#eee',
      width:'200px',
      height:'200px'
    }
 
  const style2={    
      color:'red',
      fontSize:'40px'
    }
 
  render() {
    return (
      <div style={style1}>
        <p style= {style2}>Second Way!</p>
      </div>
    )
  }
}

Achten Sie hier darauf. Am praktischsten ist die Benennungsmethode in Camel Case. Zweitens ist bei der Verwendung in JSX nur eine geschweifte Klammer {//..} erforderlich

3. Einführung von Stilen:

Einführung externer CSS-Dateien. Die externe CSS-Datei ist normales CSS. Verwenden Sie die folgende Anweisung nach der Importanweisung in der Komponente js. Die Einführung von Stilen besteht darin, die CSS-Datei extern zu schreiben. Nach dem Importieren und Verwenden weist dieser gewöhnliche importierte Stil tatsächlich bestimmte Probleme auf. Schauen wir uns dann das Problem an. Verwendung:

CSS-Datei

js-Datei

.person{
    width: 60%;
    margin:16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding:16px;
    text-align: center;
}

Ergebnisanzeige:

Problem:

Da CSS-Regeln global sind, gelten die Stilregeln jeder Komponente für die gesamte Seite, was zu einer großen Anzahl von Konflikten führen kann. Das heißt, wenn ich zwei CSS-Dateien habe und einige der Stilnamen darin gleich sind, werden sie überschrieben. Die einfache Lösung besteht darin, die Benennung der Stile komplex und nicht wiederholend zu gestalten, aber auf diese Weise gibt es sie Zu viele Stile lassen sich nur schwer vermeiden und die Benennung sieht nicht schön aus.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmierlehre

! !

Das obige ist der detaillierte Inhalt vonSo fügen Sie einen CSS-Stil hinzu, um zu reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!