React-da aýratyn faýldan style atributyna maglumat goýbermek

Biz komponent faýlynda ýaly stillar obýektlerini ýazmaýarys, özümiziň stil obýektlerimiz bilen aýratyn faýl döredip, olary gerekli komponente import edip bileris.

Şeýlelik bilen, CSS stillary bolmadyk komponentimizi alyň:

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

Geliň, src papkasyna aýratyn styles.js faýly döreteliň we içinde stil obýektlerimizi ýazalyň:

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',
};

styles.js faýlynyň aşagynda bizim obýektlerimizi bir styles obýekti hökmünde eksport etmegi ýatdan çykarmaly däl:

export const styles = {
	class1: class1,
	class2: class2,
	class3: class3,
	class4: class4
};

Indi styles obýektini komponentimize import edeliň:

import { styles } from "./styles";

Indi biz gerek bolan CSS stil obýektini umumy styles obýektinden taglarymyza ulanyp bileris. Biriniň abzasyna class2 obýektinden stillary ulanýarys:

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

Şuňa meňzeş ýagdaýda galan taglara obýektlerden stillary goşuň.

Netijede, komponentiň kody aşakdaky görnüşde bolar:

function App() {
	return (
		<div style={styles.class1}>
			<p style={styles.class2}>tekst</p>
			<p style={styles.class3}>tekst</p>
			<p style={styles.class4}>tekst</p>
		</div>
	);
}

Öňki sapakdaky mesele üçin ýasalan React komponentiňizi alyň. Aýratyn styles.js faýly dörediň, onda taglaryňyz üçin CSS stil obýektleri bolsun, olary bir obýekt hökmünde eksport ediň, stilleri React komponentiňize ulanyň.