Datu ievietošana style atribūtā no objekta React

CSS stilus elementiem var pievienot arī ar style atribūta style palīdzību. Šajā un dažās nākamajās nodarbībās mēs apskatīsim inlaino stilošanu metodes.

Šoreiz mēs nepievienosim failu styles.css, bet nodosim atbilstošās vērtības atribūtā style kā objektu ar stiliem katram tagam, kurus mēs rakstīsim tieši komponenta failā.

Tātad, ņemsim mūsu komponentu bez CSS stiliem, ko mēs izveidojām iepriekšējā nodarbībā:

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

Izveidosim failā App.js pirms komandas return objektu ar CSS stiliem div mainīgajā class1. Atcerieties, ka īpašību nosaukumi šeit tiek rakstīti camelCase notācijā, un īpašību vērtības ir jāieliek pēdiņās:

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

Tagad pievienosim objektu class2 ar stiliem pirmajam rindkopai:

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

Objektu class3 ar stiliem otrajai rindkopai:

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

Un visbeidzot class4 pēdējai rindkopai:

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

Tagad, lai komponentā piemērotu CSS klases, izmantosim atribūtu style. Pirmajai rindkopai mums bija mainīgais class2, padodam to kā vērtību:

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

Līdzīgā veidā pievienosim stilus no objektiem pārējiem tagiem.

Rezultātā komponenta kods izskatīsies šādi:

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

Paņemiet React komponentu, kuru jūs izveidojāt uzdevumā iepriekšējai nodarbībai, izveidojiet objektus ar CSS stiliem jūsu tagiem, ievietojiet tos attiecīgajos atribūtos style.