So fügen Sie Ihrer React-Komponente CSS hinzu

Sind Sie nicht sicher, wie Sie Ihrem Bauteil diese tollen Stile verleihen können? Machen Sie sich keine Sorgen mehr, hier besprechen wir drei Möglichkeiten, die Ihnen bei der Umsetzung Ihrer schönen Designs helfen werden. Es ist gut, wenn Sie beim Lesen dieses Artikels etwas Verständnis für CSS und Javascript haben. Lasst uns eintauchen!

1. CSS-Stylesheet verwenden.

Dazu müssen Sie Ihre eigenen CSS-Stile in eine separate Datei schreiben und diese dann in Ihre Komponente importieren.
Denken Sie daran, beim Benennen der Datei die Erweiterung .css zu verwenden. Sehen Sie sich den Beispielcode unten an.

//Ihre CSS-Datei

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//Importieren Sie Ihre CSS-Datei in Ihre Komponente.
// Sie geben der CSS-Datei einen Namen Ihrer Wahl.

import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );

}
}

1. Verwendung des CSS-Moduls

Vielleicht gefällt Ihnen die erste Methode nicht, oder sie passt nicht zu Ihrer Art, Code zu schreiben.
Sie können unsere zweite Methode verwenden. Hier erstellen Sie auch eine separate Datei, in die Sie Ihr CSS schreiben, dieses Mal jedoch mit einer anderen Erweiterung; das .module.css

// Ihr CSS-Modul.
// mystyle.module.css

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//Importieren Sie das Modul in Ihre Komponente.

import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

1. Inline-Styling verwenden

Man kann Inline-Styling mithilfe des Stilattributs style='styles hier erreichen. Allerdings muss man vorsichtig sein, da alles, was im Stilattribut als Wert steht, nicht Ihr typischer CSS-Selektor, sondern ein Javascript-Objekt ist, und daher ist es sollte die Syntax eines Objekts annehmen.

Das meine ich;

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Beachten Sie die doppelten geschweiften Klammern. Beachten Sie auch die Schlüssel-Wert-Paar-Syntax, die zum Schreiben von Javascript-Objekten verwendet wird.

Etwas anderes, das Sie beachten sollten, ist, dass beim Schreiben von Dingeigenschaften, die zwei Namen haben, zum Beispiel „background-color“, einer erforderlich ist, „camelCase backgroundColor“ zu verwenden

Tipp:Sie können ein Objekt mit Ihrem gesamten Styling-Code erstellen und es im Stilattribut aufrufen.

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Beachten Sie, dass keine doppelten geschweiften Klammern vorhanden sind.

Ich hoffe, das war hilfreich und es hat Ihnen Spaß gemacht, es zu lesen. Ich freue mich über Feedback, damit ich meinen Artikel beim nächsten Schreiben verbessern kann. Vielen Dank

Das obige ist der detaillierte Inhalt vonSo fügen Sie Ihrer React-Komponente CSS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!