Kuingiza Data Katika Sifa ya style Kutoka kwa Vigezo katika React

Katika somo lililopita tuliandika kitu moja kwa moja kwenye sifa style. Tunaweza pia kutumia kuingiza data kwenye kitu hicho kutoka kwa vigezo.

Wacha tuchukue kijenzi chetu cha React bila mitindo ya CSS:

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

Sasa tutaunda vigezo na tuwape thamani za sifa za CSS. Tuanze kwa mpangilio na mitindo ya div.

Katika faili ya kijenzi kabla ya amri ya return tuunde kigezo wd1 na tupe thamani '200px':

const wd1 = '200px';

Kwa njia sawa tuunde vigezo kwa thamani zote za sifa za div yetu:

const wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Sasa tuongeze vigezo kwa aya ya kwanza:

const co1 = 'orangered';
const fw1 = 'bold';

Kwa aya ya pili:

const fs1 = 'italic';
const co2 = 'brown';

Na, mwishowe, kwa ya mwisho. Hapa itahitaji mbili tu, na si tatu vigezo. Haina maana kurudia, kwani thamani bold tayari tunayo kwa aya ya kwanza:

const bco1 = 'orange';
const co3 = 'white';

Sasa tutaweka vigezo vilivyo na thamani za mitindo. Wacha, tufanye hivyo kwa aya ya kwanza. Tuingize vigezo co1 na fw1 badala ya thamani kwenye kitu:

<p style = {{ color: co1, fontWeight: fw1 }}>
	nakala
</p>

Kwa njia sawa tufanye na viti vingine.

Matokeo yake, msimbo wetu wa kijenzi utaonekana kama hii:

function App() {
	const wd1 = '200px';
	const br1 = '2px solid brown';
	const pd1 = '10px';
	const ta1 = 'center';

	const co1 = 'orangered';
	const fw1 = 'bold';

	const fs1 = 'italic';
	const co2 = 'brown';
	
	const bco1 = 'orange';
	const co3 = 'white';

	return (
		<div style = {{
			width: wd1,
			border: br1,
			padding: pd1,
			textAlign: ta1 }}>
			<p style = {{ color: co1, fontWeight: fw1 }}>
				nakala
			</p>
			<p style = {{ fontStyle: fs1, color: co2 }}>
				nakala
			</p>
			<p style = {{ 
				backgroundColor: bco1,
				fontWeight: fw1,
				color: co3 }}>
				nakala
			</p>
		</div>
	);
}

Badilisha msimbo wa suluhisho la shida kwenye somo lililopita ili thamani za sifa za CSS zihifadhiwe kwenye vigezo.