Data-invoeging in style attribuut vanaf 'n aparte lêer in React

Ons hoef nie style-objekte in die lêer met die komponent te skryf nie, soos in die vorige les, maar kan 'n aparte lêer met ons style-objekte skep en dit in die nodige komponent invoer.

Kom ons neem dus ons komponent sonder CSS-style:

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

Kom ons skep 'n aparte lêer styles.js in die gids src, waarin ons ons style-objekte sal definieer:

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

Moenie vergeet om onderaan die lêer styles.js ons objekte as een objek styles uit te voer nie:

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

Laat ons nou die objek styles in ons komponent invoer:

import { styles } from "./styles";

Nou kan ons die nodige objek met CSS-style vanuit die algemene objek styles op ons etikette toepas. Kom ons pas die style vanuit objek class2 op die eerste paragraaf toe:

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

Voeg op soortgelyke wyse style vanuit die ander objekte by die res van die etikette.

As gevolg hiervan sal die komponent se kode soos volg lyk:

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

Neem die React-komponent wat jy in die vorige les se taak gedoen het. Skep 'n aparte lêer styles.js wat die CSS-style-objekte vir jou etikette bevat, voer dit as een objek uit, en pas die style op jou React- komponent toe.