Duomenų įterpimas į style atributą iš objekto React

CSS stilius elementams taip pat galima pridėti ir naudojant atributą style. Šioje ir keliose kitose pamokose mes apžvelgsime inline stiliaus taikymo būdus.

Dabar nebesijungsime failo styles.css, o perduosime atitinkamas reikšmes į atributą style kaip objektą su stiliais kiekvienai žymai, kuriuos mes rašysime tiesiai komponento faile.

Taigi, paimkime mūsų komponentą be CSS stilių, kurį kūrėme praeitoje pamokoje:

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

Sukurkime faile App.js prieš komandą return objektą su CSS stiliais div'ui kintamajame class1. Atminkite, kad savybių pavadinimai čia rašomi camelCase notacijoje, o savybių reikšmes reikia įdėti į kabutes:

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

Dabar pridėkime objektą class2 su stiliais pirmajai pastraipai:

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

Objektą class3 su stiliais antrajai pastraipai:

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

Ir galiausiai class4 paskutiniajai:

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

Dabar, kad pritaikytume komponente CSS klases, naudokimės atributu style. Pirmajai pastraipai mes turėjome kintamąjį class2, perduokime jį kaip reikšmę:

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

Panašiu būdu pridėkime stilius iš objektų likusioms žymoms.

Galutinai, komponento kodas atrodys taip:

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

Paimkite React komponentą, kurį darėte užduotyje praeitai pamokai, sukurkite objektus su CSS stiliais savo žymoms, nustatykite juos atitinkamuose atributuose style.