Работа с CSS стилове в атрибута style в React

В предишните уроци в атрибута style ние предавахме променлива, съдържаща обект с CSS стилове. Може да не се използва променлива, а да се опише обекта директно в атрибута - в този случай са ни нужни две двойки фигурни скоби - първата за JSX вмъкване, а втората - за обекта.

И така, нека вземем нашия компонент без CSS стилове:

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

Например, нека напишем директно CSS свойства за първия параграф на нашия React компонент App:

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

По подобен начин ще добавим стилове за останалите тагове.

В резултат, кодът на компонента ще изглежда по следния начин:

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

Вземете React компонента, който сте правили в задачата към предишния урок. Добавете стилове на всеки таг директно в атрибута style, както е показано в този урок.