Kuingiza Data kwenye Sifa ya style Kutoka kwa Kitu katika React

Mitindo ya CSS inaweza pia kuongezwa kwa vipengele kupitia sifa style. Katika somo hili na machache yafuatayo, tuta angalia njia za staili za inline.

Kwa sasa hatutaunganisha faili styles.css, badala yake tutawasilisha thamani zinazofaa kwenye sifa style kwa namna ya kitu na mitindo kwa kila kitambulisho, ambayo tuta andika moja kwa moja kwenye faili ya sehemu (component).

Kwa hivyo, tuchukue sehemu yetu bila mitindo ya CSS, ambayo tulifanya katika somo lililopita:

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

Wacha tuunde kitu chenye mitindo ya CSS kwa div katika faili App.js kabla ya amri return katika kutofautisha class1. Kumbuka kwamba majina ya sifa hapa yanaandikwa kwa camelCase notation, na thamani za sifa zinahitaji kuwekwa kwenye alama ya quotation:

const class1 = {
	width: '200px',
	border: '2px solid brown',
	padding: '10px',
	textAlign: 'center'
};

Sasa tuongeze kitu class2 chenye mitindo kwa aya ya kwanza:

const class2 = {
	color: 'orangered',
	fontWeight: 'bold'
}

Kitu class3 chenye mitindo kwa aya ya pili:

const class3 = {
	fontStyle: 'italic',
	color: 'brown',
}

Na mwisho, class4 kwa ya mwisho:

const class4 = {
	backgroundColor: 'orange',
	fontWeight: 'bold',
	color: 'white',
}

Sasa, ili kutumia katika sehemu CSS classes, tutatumia sifa style. Kwa aya ya kwanza tulikuwa na kutofautisha class2, tuiwasilishe kama thamani:

<p style={class2}>nakala</p>

Kwa namna ile ile tuongeze mitindo kutoka kwa vitu kwa vitambulisho vilivyobaki.

Kwa matokeo, msimbo wa sehemu uta onekana kama ifuatavyo:

function App() {
	const class1 = {
		width: '200px',
		border: '2px solid brown',
		padding: '10px',
		textAlign: 'center',
	};

	const class2 = {
		color: 'orangered',
		fontWeight: 'bold',
	};

	const class3 = {
		fontStyle: 'italic',
		color: 'brown',
	};

	const class4 = {
		backgroundColor: 'orange',
		fontWeight: 'bold',
		color: 'white',
	};

	return (
		<div style={class1}>
			<p style={class2}>nakala</p>
			<p style={class3}>nakala</p>
			<p style={class4}>nakala</p>
		</div>
	);
}

Chukua sehemu ya React ambayo ulifanya katika kazi kwa somo lililopita, unda vitu vya mitindo ya CSS kwa vitambulisho vyako, weka kwenye sifa zinazofaa style.