Χρήση καθολικού CSS για στυλ στο React

Ας υποθέσουμε ότι έχουμε ένα React component App, στο οποίο υπάρχει ένα div, και μέσα στο div - τρεις παράγραφοι:

function App() {
	return (
		<div>
			<p>κείμενο</p>
			<p>κείμενο</p>
			<p>κείμενο</p>
		</div>
	);
}

Ας δώσουμε στυλ σε αυτό το component. Για αυτό, στον ίδιο φάκελο src με το component μας, θα δημιουργήσουμε ένα συνηθισμένο αρχείο CSS με στυλ styles.css για τις ετικέτες μας.

Σε αυτό το αρχείο, για το div θα δημιουργήσουμε μια κλάση class1 με στυλ:

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

Τώρα ας προσθέσουμε την κλάση class2 με στυλ για την πρώτη παράγραφο:

.class2 {
	color: orangered;
	font-weight: bold;
}

Κλάση class3 με στυλ για τη δεύτερη παράγραφο:

.class3 {
	font-style: italic;
	color: brown;
}

Και, τέλος, θα δημιουργήσουμε την κλάση class4 για την τελευταία παράγραφο:

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

Τελειώσαμε με το αρχείο CSS. Απομένει να εφαρμόσουμε τα CSS στυλ μας, που γράψαμε για τις ετικέτες. Ας επιστρέψουμε στο αρχείο μας App.js με το component.

Το πρώτο πράγμα που πρέπει οπωσδήποτε να κάνουμε - είναι να προσθέσουμε στην αρχή του αρχείου μια γραμμή εισαγωγής του αρχείου στυλ μας styles.css:

import './styles.css';

Τώρα, για να εφαρμόσουμε στο component τις CSS κλάσεις από το αρχείο, θα χρησιμοποιήσουμε το χαρακτηριστικό class. Για την πρώτη παράγραφο είχαμε την κλάση class2, ας την εφαρμόσουμε:

<p class="class2">κείμενο</p>

Παρόμοια, θα προσθέσουμε κλάσεις για τις υπόλοιπες ετικέτες. Στο τέλος, θα πάρουμε τον ακόλουθο κώδικα:

<div class="class1">
	<p class="class2">κείμενο</p>
	<p class="class3">κείμενο</p>
	<p class="class4">κείμενο</p>
</div>

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