Maglumatlaryň style atributynda React-de bir obýektdän goýulmagy

CSS stillary elementlere şeýle hem style atributy arkaly goşup bolýar. Bu we birnäçe indiki sapakda biz inline stillendirme usullaryny gözden geçireris.

Indi biz styles.css faýlyny birikdirmän, her bir tege degişli bahalary style atributyna her bir teg üçin stillary bar obýekt görnüşinde komponent faýlynda göni ýazarys.

Şeýlelik bilen, öňki sapakda eden CSS stillary ýok komponentymyzy alyň:

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

Geliň, App.js faýlynda return buýrugyndan öň div üçin CSS stillary bar obýekti class1 üýtgeýjisinde döretäliň. Ýatda saklaň, bu ýerde häsiýetleriň adlary camelCase notasiýada ýazylyar, häsiýetleriň bahalaryny bolsa ýazyjyň içine almaly:

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

Indi birinji abzas üçin stillar bilen class2 obýektini goşalyň:

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

Ikinji abzas üçin stillar bilen class3 obýekti:

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

We, ahyrsoňy class4 iň soňky üçin:

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

Indi, komponentde CSS klasslaryny ulanyp başlamak üçin, style atributyny ulanarys. Birinji abzas üçin bizde class2 üýtgeýjisi bardy, ony baha hökmünde bereliň:

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

Şuňa meňzeş şekilde galan teglere obýektlerden stillary goşuň.

Netijede, komponentiň kody aşakdaky ýaly bolar:

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

Öňki sapakdaky meselede eden React komponentyňyzy alyň, tegleriňize CSS stillary bar obýektleri dörediň, olary degişli style atributlarynda belläň.