Reactda style atributida CSS stillari bilan ishlash

Oldingi darslarda style atributiga CSS stillarini o'z ichiga olgan ob'ektni o'zida saqlovchi o'zgaruvchini uzatgan edik. Oraliq o'zgaruvchisiz foydalanish mumkin, balki ob'ektni atributning o'zida yozish mumkin - bu holda bizga ikkita jingalak qavs jufti kerak bo'ladi - birinchisi JSX qo'shimchasi, ikkinchisi esa ob'ekt uchun.

Shunday qilib, keling, CSS stylesiz komponentimizni olaylik:

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

Masalan, React komponentimiz Appning birinchi abzatsi uchun CSS xususiyatlarini to'g'ridan-to'g'ri yozamiz:

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

Qolgan teglarga ham shu tarzda stillarni qo'shamiz.

Natijada, komponent kodi quyidagicha ko'rinadi:

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

Oldingi darsdagi vazifa uchun qilgan React komponentingizni oling. Har bir tegga style atributida to'g'ridan-to'g'ri stillarni qo'shing, xuddi shu darsda ko'rsatilganidek.