Data-invoeging in style-kenmerk vanuit 'n objek in React

CSS-style kan ook aan elemente toegevoeg word met behulp van die style-kenmerk. In hierdie en 'n paar daaropvolgende lesse sal ons metodes van inline-styling ondersoek.

Ons sal nie nou die lêer styles.css koppel nie, maar die ooreenstemmende waardes in die style-kenmerk oordra in die vorm van 'n objek met style vir elke etiket, wat ons regstreeks in die komponentlêer sal skryf.

So, neem ons ons komponent sonder CSS-style, wat ons in die vorige les gedoen het:

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

Laat ons in die lêer App.js voor die opdrag return 'n objek met CSS-style vir die div skep in die veranderlike class1. Onthou dat die name van eienskappe hier in camelCase notasie geskryf word, en die waardes van die eienskappe moet in aanhalingstekens geplaas word:

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

Kom ons voeg nou die objek class2 by met style vir die eerste paragraaf:

const class2 = {
	color: 'oranjerood',
	fontWeight: 'vet'
}

Die objek class3 met style vir die tweede paragraaf:

const class3 = {
	fontStyle: 'kursief',
	color: 'bruin',
}

En laastens class4 vir die laaste een:

const class4 = {
	backgroundColor: 'oranje',
	fontWeight: 'vet',
	color: 'wit',
}

Nou, om die CSS-klasse in die komponent toe te pas, gebruik ons die kenmerk style. Vir die eerste paragraaf het ons die veranderlike class2 gehad, laat ons dit as waarde oordra:

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

Op 'n soortgelyke manier voeg ons style vanuit die objekte vir die oorblywende etikette by.

As gevolg daarvan sal die kode van die komponent soos volg lyk:

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

	const class2 = {
		color: 'oranjerood',
		fontWeight: 'vet',
	};

	const class3 = {
		fontStyle: 'kursief',
		color: 'bruin',
	};

	const class4 = {
		backgroundColor: 'oranje',
		fontWeight: 'vet',
		color: 'wit',
	};

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

Neem die React-komponent wat jy in die taak van die vorige les gedoen het, skep voorwerpe met CSS-style vir jou etikette, plaas hulle in die ooreenstemmende style-kenmerke.