Datu ievietošana style atribūtā no atsevišķa faila React

Mēs varam nerakstīt stilu objektus komponenta failā, kā tas tika darīts iepriekšējā nodarbībā, bet gan izveidot atsevišķu failu ar mūsu stilu objektiem un importēt tos vajadzīgajā komponentē.

Tātad, ņemsim mūsu komponentu bez CSS stiliem:

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

Izveidosim mapē src atsevišķu failu styles.js, kurā ierakstīsim mūsu stilu 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',
};

Neaizmirsīsim faila styles.js apakšā eksportēt mūsu objektus kā vienu objektu styles:

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

Tagad importēsim objektu styles mūsu komponentē:

import { styles } from "./styles";

Tagad mēs varam piemērot vajadzīgo objektu ar CSS stiliem no kopējā objekta styles mūsu elementiem. Piemērosim pirmajam rindkopai stilus no objekta class2:

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

Līdzīgā veidā pievienosim stilus no objektiem pārējiem elementiem.

Rezultātā komponenta kods izskatīsies šādi:

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

Paņemiet React komponentu, kuru jūs veidojāt uzdevumā iepriekšējai nodarbībai. Izveidojiet atsevišķu failu styles.js, kurā būs CSS stilu objekti jūsu elementiem, eksportējiet tos kā vienu objektu, piemērojiet stilus savam React komponentam.