Heim > Web-Frontend > CSS-Tutorial > So fügen Sie Ihrer React-Komponente CSS hinzu

So fügen Sie Ihrer React-Komponente CSS hinzu

Linda Hamilton
Freigeben: 2024-10-03 18:08:30
Original
318 Leute haben es durchsucht

How to add CSS to your React Component

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;
}
Nach dem Login kopieren

//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>
    );

}
}

Nach dem Login kopieren
  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;
}
Nach dem Login kopieren

//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>;
  }
}
Nach dem Login kopieren
  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>
    );
  }
}
Nach dem Login kopieren

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>
    );
  }
}
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage