Futja e të dhënave në atributin style nga një skedar i veçantë në React

Ne mund të mos shkruajmë objektet me stile në skedarin me komponentin, si në mësimin e kaluar, por të krijojmë një skedar të veçantë me objektet tona të stileve dhe t'i importojmë ato në komponentin e duhur.

Pra, le të marrim komponentin tonë pa stilet CSS:

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

Le të krijojmë në dosjen src një skedar të veçantë styles.js, në të cilin do të shkruajmë objektet tona me stile:

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

Të mos harrojmë në fund të skedarit styles.js të eksportojmë objektet tona si një objekt styles:

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

Tani le të importojmë objektin styles në komponentin tonë:

import { styles } from "./styles";

Tani ne mund të aplikojmë objektin e nevojshëm me stilet CSS nga objekti i përgjithshëm styles në etiketat tona. Le të aplikojmë në paragrafin e parë stilet nga objekti class2:

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

Në mënyrë të ngjashme le të shtojmë stilet nga objektet e mbetura në etiketat e tjera.

Si rezultat, kodi i komponentit do të duket si më poshtë:

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

Merrni komponentin React që ju bëtë në detyrën e mësimit të kaluar. Krijoni një skedar të veçantë styles.js, në të cilin do të ketë objekte stilesh CSS për etiketat tuaja, eksportojini ato si një objekt, aplikoni stilet në komponentin tuaj React.