Einfügen von Daten in das style-Attribut aus einer separaten Datei in React

Wir müssen die Stilobjekte nicht in der Datei mit der Komponente schreiben, wie in der vorherigen Lektion, sondern können eine separate Datei mit unseren Stilobjekten erstellen und sie in die gewünschte Komponente importieren.

Nehmen wir also unsere Komponente ohne CSS-Stile:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Lasst uns im Ordner src eine separate Datei styles.js erstellen, in der wir unsere Stilobjekte definieren:

styles.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center',
};

const class2 = {
  color: 'orangered',
  fontWeight: 'bold',
};

const class3 = {
  fontStyle: 'italic',
  color: 'brown',
};

const class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
};

Vergessen wir nicht, am Ende der Datei styles.js unsere Objekte als ein Objekt styles zu exportieren:

styles.jsexport const styles = {
  class1: class1,
  class2: class2,
  class3: class3,
  class4: class4
};

Jetzt importieren wir das Objekt styles in unsere Komponente:

App.jsimport { styles } from "./styles";       

Nun können wir das benötigte Objekt mit CSS-Stilen aus dem gemeinsamen Objekt styles auf unsere Tags anwenden. Wenden wir auf den ersten Absatz die Stile aus dem Objekt class2 an:

App.js<p style={styles.class2}>text</p>

Ähnlich fügen wir den Stilen aus den anderen Objekten den restlichen Tags hinzu.

Als Ergebnis wird der Code der Komponente wie folgt aussehen:

App.jsfunction App() {
  return (
    <div style={styles.class1}>
      <p style={styles.class2}>text</p>
      <p style={styles.class3}>text</p>
      <p style={styles.class4}>text</p>
    </div>
  );
}