Duomenų įterpimas į style atributą iš atskiro failo React

Mes galime nerašyti stilių objektų faile su komponentu, kaip ankstesnėje pamokoje, o sukurti atskirą failą su mūsų stilių objektais ir importuoti juos į reikiamą komponentą.

Taigi, paimkime mūsų komponentą be CSS stilių:

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

Sukurkime aplanke src atskirą failą styles.js, kuriame aprašysime mūsų stilių objektus:

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

Nepamirškime failo styles.js apačioje eksportuoti mūsų objektus kaip vieną objektą styles:

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

Dabar importuokime objektą styles į mūsų komponentą:

import { styles } from "./styles";

Dabar mes galime pritaikyti mums reikalingą objektą su CSS stiliais iš bendro objekto styles prie mūsų tag'ų. Pritaikykime pirmai pastraipai stilius iš objekto class2:

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

Panašiu būdu pridėkime stilius iš objektų likusiems tag'ams.

Galutinai, komponento kodas atrodys taip:

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

Paimkite React komponentą, kurį jūs darėte užduotyje prie ankstesnės pamokos. Sukurkite atskirą failą styles.js, kuriame bus CSS stilių objektai jūsų tag'ams, eksportuokite juos kaip vieną objektą, pritaikykite stilius savo React komponentui.