Vkladanie dát do atribútu style z objektu v React

CSS štýly elementom je možné pridávať aj pomocou atribútu style. V tejto a niekoľkých nasledujúcich lekciách preskúmame spôsoby inline štýlovania.

Teraz nebudeme pripájať súbor styles.css, ale odovzdáme príslušné hodnoty do atribútu style vo forme objektu so štýlmi pre každý tag, ktoré budeme písať priamo v súbore komponentu.

Takže, zoberme náš komponent bez CSS štýlov, ktorý sme robili v minulej lekcii:

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

V súbore App.js pred príkazom return vytvorme objekt s CSS štýlmi pre div v premennej class1. Pamätajte, že názvy vlastností sa tu píšu v camelCase notácii a hodnoty vlastností je potrebné zapísať do úvodzoviek:

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

Teraz pridajme objekt class2 so štýlmi pre prvý odsek:

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

Objekt class3 so štýlmi pre druhý odsek:

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

A nakoniec class4 pre posledný:

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

Teraz, aby sme aplikovali v komponente CSS triedy, použijeme atribút style. Pre prvý odsek sme mali premennú class2, odovzdajme ju ako hodnotu:

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

Podobným spôsobom pridajme štýly z objektov pre zvyšné tagy.

Výsledne bude kód komponentu vyzerať nasledovne:

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

Vezmite React komponent, ktorý ste robili v úlohe k minulej lekcii, vytvorte objekty s CSS štýlmi pre vaše tagy a nastavte ich v príslušných atribútoch style.