Məlumatların React-də ayrı fayldan style atributuna daxil edilməsi

Biz stil obyektlərini əvvəlki dərsdə olduğu kimi komponent faylında yazmaya bilərik, əvəzində stil obyektlərimiz olan ayrı bir fayl yarada və onları lazımi komponentə idxal edə bilərik.

Beləliklə, CSS stili olmayan komponentimizi götürək:

function App() {
	return (
		<div>
			<p>mətn</p>
			<p>mətn</p>
			<p>mətn</p>
		</div>
	);
}

Gəlin src qovluğunda ayrı bir styles.js faylı yaradaq, icərisə stil obyektlərimizi yazaq:

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 faylının aşağısında obyektlərimizi bir styles obyekti kimi ixrac etməyi unutmayaq:

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

İndi styles obyektini komponentimizə idxal edək:

import { styles } from "./styles";

İndi biz teqlərimizə ümumi styles obyektindən lazım olan CSS stil obyektini tətbiq edə bilərik. Birinci abzasa class2 obyektindən stil tətbiq edək:

<p style={styles.class2}>mətn</p>

Qalan teqlərə də obyektlərdən stiləri oxşar şəkildə əlavə edək.

Nəticədə, komponentin kodu aşağıdakı kimi olacaq:

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

Əvvəlki dərsin tapşırığında etdiyiniz React komponentini götürün. Ayrı bir styles.js faylı yaradın, icərisində teqləriniz üçün CSS stil obyektləri olsun, onları bir obyekt kimi ixrac edin, stilləri React komponentinizə tətbiq edin.