Kufanya kazi na mitindo ya CSS katika style attribute katika React

Katika masomo yaliyopita katika style attribute style tulipitisha variable iliyo na kitu na mitindo ya CSS. Inawezekana kutotumia variable ya kati, na kuandika kitu moja kwa moja katika attribute - katika kesi hii tunahitaji miraba miwili ya braces - ya kwanza kutoka kwa JSX insertion, na ya pili - kutoka kwa kitu.

Kwa hivyo, tuchukue komponenti yetu ya React bila mitindo ya CSS:

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

Kwa mfano, tuandike moja kwa moja CSS properties kwa aya ya kwanza ya komponenti yetu ya React App:

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

Kwa njia sawa ongeza mitindo kwa tags zingine.

Kama matokeo, msimbo wa komponenti utakuwa inaonekana kama ifuatavyo:

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

Chukua komponenti ya React ambayo ulifanya katika kazi ya somo lililopita. Ongeza mitindo kwa kila tag moja kwa moja katika attribute style, kama inavyoonyeshwa katika somo hili.