Rad sa CSS stilovima u atributu style u React-u

U prethodnim lekcijama u atribut style prosledili smo promenljivu koja sadrži objekat sa CSS stilovima. Možete izbeći korišćenje međupromenljive i napisati objekat direktno u atributu - u tom slučaju su nam potrebne dva para vitičastih zagrada - prva za JSX umetanje, a druga - za objekat.

Dakle, uzmimo naš komponent bez CSS stilova:

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

Na primer, postavimo direktno CSS svojstva za prvi pasus našeg React komponenta App:

<p style = {{
	color: 'orangered',
	fontWeight: 'bold' }}>
	tekst
</p>

Na sličan način dodajmo stilove za ostale tagove.

Kao rezultat, kod komponenta će izgledati na sledeći način:

function App() {
	return (
		<div style = {{
			width: '200px',
			border: '2px solid brown',
			padding: '10px',
			textAlign: 'center' }}>
			<p style={{
				color: 'orangered',
				fontWeight: 'bold' }}>
				tekst
			</p>
			<p style = {{
				fontStyle: 'brown',
				color: 'brown' }}>
				tekst
			</p>
			<p style = {{
				backgroundColor: 'orange',
				fontWeight: 'bold',
				color: 'white' }}>
				tekst
			</p>
		</div>
	);
}

Uzmite React komponent koji ste pravili u zadatku za prethodnu lekciju. Dodajte stilove svakom tagu direktno u atributu style, kao što je prikazano u ovoj lekciji.