Εισαγωγή στην εκμάθηση στυλ με CSS modules στο React

Σε αυτό και στα επόμενα μαθήματα, θα εξετάσουμε μια ακόμη σύγχρονη και αποτελεσματική προσέγγιση για το στυλ των React components - τη χρήση των CSS modules.

CSS modules σε αυτήν την προσέγγιση είναι ξεχωριστά compiled CSS αρχεία, στα οποία τα ονόματα των κλάσεων και των κινούμενων εικόνων βρίσκονται σε τοπικό πεδίο εφαρμογής, πράγμα που αποφεύγει τις συγκρούσεις μεταξύ των ονομάτων κλάσεων από διαφορετικά components.

Για να αρχίσουμε, θα δημιουργήσουμε και θα εκτελέσουμε την μικρή μας εφαρμογή React buttons. Για αυτό, θα δημιουργήσουμε έναν κενό φάκελο test, θα μπούμε σε αυτόν και στο terminal θα γράψουμε τις ακόλουθες εντολές:

npx create-react-app buttons
cd buttons
npm start

Αν έχετε μια πρόσφατη έκδοση του React, δηλαδή υποστηρίζει Create React App v2 και πάνω, τότε δεν χρειάζεται να κάνετε καμία πρόσθετη ρύθμιση, αφού σε αυτήν την περίπτωση τα CSS modules θα υποστηρίζονται αυτόματα. Για να ελέγξετε, ρίξτε μια ματιά στο package.json, αν η εξάρτηση react-scripts είναι έκδοσης 2.x.x και πάνω, τότε όλα είναι εντάξει. Αλλιώς, ενημερώστε το React σας.

Η εφαρμογή μας για στυλ με τη μέθοδο CSS modules θα περιέχει τρία κουμπιά.

Τα CSS αρχεία θα τα ονομάζουμε, ακολουθώντας τη σύμβαση, ως εξής: [name].module.css.

Ας δημιουργήσουμε τώρα τον φάκελο components στον src, και σε αυτόν να προσθέσουμε το αρχείο Buttons.module.css με τα CSS στυλ για τα κουμπιά μας:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Επίσης, στον φάκελο components, θα δημιουργήσουμε ένα κενό αρχείο React component Buttons.js, ενώ προς το παρόν μην αγγίζετε το αρχείο που δημιουργήθηκε αυτόματα App.js, θα ασχοληθούμε με αυτό αργότερα!

Στο Buttons.js πρέπει να κάνουμε import το αρχείο με τα CSS στυλ, και επίσης να εφαρμόσουμε αυτά τα στυλ σε κάθε κουμπί χρησιμοποιώντας το attribute class:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

Παρεμπιπτόντως, δεν είναι απαραίτητο να χρησιμοποιήσετε τη λέξη styles για το όνομα του αντικειμένου που εισάγετε με τα στυλ, μπορείτε να το ονομάσετε, όπως σας βολεύει.

Στο επόμενο μάθημα, θα ολοκληρώσουμε την εφαρμογή μας.

Ακολουθώντας τη θεωρία αυτού του μαθήματος, δημιουργήστε την εφαρμογή React inputs.

Χρησιμοποιήστε την προσέγγιση CSS modules, που παρουσιάζεται στο μάθημα. Δημιουργήστε στο src της εφαρμογής inputs το αρχείο Inputs.js για το React component Inputs, που θα περιέχει τρία πεδία εισόδου (inputs). Γράψτε μερικά στυλ στο Inputs.modules.css για τα πεδία εισόδου. Κάντε import αυτό το αρχείο στο Inputs.js και εφαρμόστε τα στυλ.