Andmete sisestamine style atribuuti objektist Reactis

CSS stiile saab elementidele lisada ka style atribuudi abil. Selles ja mõnes järgnevas õppetükis me vaatleme inline-stiilimise meetodeid.

Nüüd me ei ühenda faili styles.css, vaid anname vastavad väärtused style atribuudi sisse objekti kujul koos stiilidega iga tagi jaoks, mida me kirjutame otse komponendi faili.

Niisiis, võtame oma komponendi ilma CSS stiilideta, mida me tegime eelmises õppetükis:

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

Loome failis App.js enne käsku return objekti CSS stiilidega divi jaoks muutujas class1. Pidage meeles, et omaduste nimetused kirjutatakse siin camelCase notatsioonis, ja omaduste väärtused tuleb võtta jutumärkidesse:

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

Nüüd lisame objekti class2 koos stiilidega esimese lõigu jaoks:

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

Objekti class3 koos stiilidega teise lõigu jaoks:

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

Ja lõpuks class4 viimase jaoks:

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

Nüüd, et rakendada komponendis CSS klasse, kasutame atribuuti style. Esimese lõigu jaoks meil oli muutuja class2, edastame selle väärtusena:

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

Samamoodi lisame stiilid objektidest ülejäänud tagidele.

Tulemusena näeb komponendi kood välja järgmine:

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

Võtke React komponent, mida te tegite ülesandes eelmise õppetüki jaoks, looge objektid CSS stiilidega teie tagidele, määrake need vastavatesse atributitesse style.