Futja e të dhënave në atributin style nga një objekt në React

Stilet CSS elementeve mund të shtohen gjithashtu duke përdorur atributin style. Në këtë dhe në disa mësime të ardhshme, ne do të shqyrtojmë mënyrat e stilizimit inline.

Tani nuk do ta lidhim skedarin styles.css, por do t'ia kalojmë vlerat përkatëse atributit style në formën e një objekti me stile për secilën tag, të cilat do t'i shkruajmë direkt në skedarin e komponentit.

Pra, le të marrim komponentin tonë pa stile CSS, që e bëmë në mësimin e kaluar:

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

Le të krijojmë në skedarin App.js, përpara komandës return, një objekt me stile CSS për div në variablin class1. Mbani mend se emrat e vetive këtu shkruhen në camelCase notacion, dhe vlerat e vetive duhet të vendosen në thonjëza:

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

Tani le të shtojmë objektin class2 me stile për paragrafin e parë:

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

Objektin class3 me stile për paragrafin e dytë:

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

Dhe, së fundi class4 për të fundit:

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

Tani, për të aplikuar në komponent klasat CSS, do të përdorim atributin style. Për paragrafin e parë kishim variablin class2, le ta kalojmë atë si vlerë:

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

Në mënyrë të ngjashme, le të shtojmë stilet nga objektet për tagjet e mbetura.

Si rezultat, kodi i komponentit do të duket si më poshtë:

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}>text</p>
			<p style={class3}>text</p>
			<p style={class4}>text</p>
		</div>
	);
}

Merrni komponentin React, të cilin e bëtë në detyrën e mësimit të kaluar, krijoni objekte me stile CSS për tagjet tuaja, vendosini ato në atributet përkatëse style.