Εισαγωγή δεδομένων στο χαρακτηριστικό style από ξεχωριστό αρχείο στο React

Δεν χρειάζεται να γράφουμε αντικείμενα με στυλ στο αρχείο του component, όπως στο προηγούμενο μάθημα, αλλά μπορούμε να δημιουργήσουμε ένα ξεχωριστό αρχείο με τα αντικείμενα στυλ μας και να τα εισάγουμε στο επιθυμητό component.

Λοιπόν, ας πάρουμε το component μας χωρίς CSS στυλ:

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

Ας δημιουργήσουμε στο φάκελο src ένα ξεχωριστό αρχείο styles.js, στο οποίο θα γράψουμε τα αντικείμενά μας με στυλ:

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 να εξάγουμε τα αντικείμενά μας ως ένα αντικείμενο styles:

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

Τώρα ας εισάγουμε το αντικείμενο styles στο component μας:

import { styles } from "./styles";

Τώρα μπορούμε να εφαρμόσουμε το επιθυμητό αντικείμενο με CSS στυλ από το κοινό αντικείμενο styles στις ετικέτες μας. Ας εφαρμόσουμε στην πρώτη παράγραφο στυλ από το αντικείμενο class2:

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

Παρόμοια, θα προσθέσουμε στυλ από τα αντικείμενα στις υπόλοιπες ετικέτες.

Ως αποτέλεσμα, ο κώδικας του component θα φαίνεται ως εξής:

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

Πάρτε το React component που φτιάξατε στην άσκηση του προηγούμενου μαθήματος. Δημιουργήστε ένα ξεχωριστό αρχείο styles.js, στο οποίο θα υπάρχουν αντικείμενα CSS στυλ για τις ετικέτες σας, εξάγετέ τα ως ένα αντικείμενο και εφαρμόστε τα στυλ στο React component σας.