Vkládání dat do atributu style z objektu v Reactu

CSS styly prvkům lze také přidat pomocí atributu style. V této a několika následujících lekcích probereme metody inline stylování.

Nyně nebudeme připojovat soubor styles.css, ale předáme příslušné hodnoty do atributu style ve formě objektu se styly pro každý tag, které budeme psát přímo v souboru komponenty.

Vezměme tedy naši komponentu bez CSS stylů, kterou jsme vytvořili v minulé lekci:

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

V souboru App.js před příkazem return vytvořme objekt s CSS styly pro div v proměnné class1. Pamatujte, že názvy vlastností se zde píší v camelCase notaci a hodnoty vlastností je třeba uvést do uvozovek:

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

Nyně přidejme objekt class2 se styly pro první odstavec:

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

Objekt class3 se styly pro druhý odstavec:

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

A nakonec class4 pro poslední:

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

Nyně, abychom použili v komponentě CSS třídy, využijeme atribut style. Pro první odstavec jsme měli proměnnou class2, předáme ji jako hodnotu:

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

Podobným způsobem přidáme styly z objektů pro zbývající tagy.

Výsledný kód komponenty bude vypadat následovně:

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

Vezměte React komponentu, kterou jste vytvořili v úloze k minulé lekci, vytvořte objekty s CSS styly pro vaše tagy a nastavte je v příslušných atributech style.