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:

function 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:

const 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:

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

Jetzt importieren wir das Objekt styles in unsere Komponente:

import { 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:

<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:

function 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>
	);
}

Nehmen Sie die React-Komponente, die Sie in der Aufgabe der vorherigen Lektion erstellt haben. Erstellen Sie eine separate Datei styles.js, in der Objekte mit CSS-Stilen für Ihre Tags enthalten sind, exportieren Sie sie als ein Objekt, wenden Sie die Stile auf Ihre React-Komponente an.