CSS stílusok kezelése a style attribútumban Reactben

Az előző leckékben a style attribútumba egy változót adtunk át, amely egy objektumot tartalmazott CSS stílusokkal. Használhatunk köztes változó nélkül is, ha az objektumot közvetlenül az attribútumban írjuk le - ebben az esetben két pár kapcsos zárójelre van szükségünk - az első a JSX beágyazásához, a második pedig az objektumhoz.

Tehát vegyük a CSS stílusok nélküli komponensünket:

function App() {
	return (
		<div>
			<p>szöveg</p>
			<p>szöveg</p>
			<p>szöveg</p>
		</div>
	);
}

Például adjuk meg közvetlenül a CSS tulajdonságokat a React App komponensünk első bekezdéséhez:

<p style = {{
	color: 'orangered',
	fontWeight: 'bold' }}>
	szöveg
</p>

Hasonló módon adjunk hozzá stílusokat a többi elemhez is.

Ennek eredményeképpen a komponens kódja a következőképpen fog kinézni:

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

Vegyétek azt a React komponenst, amelyet az előző lecke feladatában készítettetek. Adjatok hozzá stílusokat minden elemhez közvetlenül a style attribútumban, ahogyan ez a leckében bemutatásra került.