Einfügen von Daten in das style-Attribut aus einem Objekt in React

CSS-Stile können Elementen auch mit dem Attribut style hinzugefügt werden. In dieser und einigen folgenden Lektionen werden wir die Methoden der Inline-Styling betrachten.

Wir werden jetzt keine styles.css Datei mehr einbinden, sondern die entsprechenden Werte als Objekt an das Attribut style übergeben, mit Stilen für jedes Tag, die wir direkt in der Komponentendatei schreiben werden.

Nehmen wir also unsere Komponente ohne CSS-Stile, die wir in der letzten Lektion erstellt haben:

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

Lassen Sie uns in der Datei App.js vor dem return-Befehl ein Objekt mit CSS-Stilen für das Div in der Variable class1 erstellen. Denken Sie daran, dass die Eigenschaftsnamen hier in camelCase Notation geschrieben werden und die Eigenschaftswerte in Anführungszeichen gesetzt werden müssen:

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

Jetzt fügen wir das Objekt class2 mit Stilen für den ersten Absatz hinzu:

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

Objekt class3 mit Stilen für den zweiten Absatz:

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

Und schließlich class4 für den letzten:

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

Um nun die CSS-Klassen in der Komponente anzuwenden, verwenden wir das Attribut style. Für den ersten Absatz haben wir die Variable class2. Übergeben wir sie als Wert:

<p style={class2}>text</p>

Auf ähnliche Weise fügen wir Stile aus den Objekten für die restlichen Tags hinzu.

Im Ergebnis wird der Code der Komponente wie folgt aussehen:

function App() {
	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',
	};

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

Nehmen Sie die React-Komponente, die Sie in der Aufgabe zur letzten Lektion erstellt haben, erstellen Sie Objekte mit CSS-Stilen für Ihre Tags und weisen Sie sie den entsprechenden style-Attributen zu.