Συνέχεια της μελέτης στυλισμού με CSS modules React

Συνεχίζουμε την εργασία πάνω στην εφαρμογή μας buttons. Τώρα ας ασχοληθούμε με το κύριο component App, που είχε ήδη δημιουργηθεί στον φάκελο src αρχικά. Σε αυτό θα έχουμε δύο div, έναν τίτλο και ένα κουμπί.

Ας αλλάξουμε το όνομα του αρχείου App.css σε App.module.css σύμφωνα με την σύμβαση, να το καθαρίσουμε και να δημιουργήσουμε σε αυτό μερικές κλάσεις με CSS styles για τις ετικέτες:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Και τώρα ας καθαρίσουμε τα περιεχόμενα του αρχείου App.js. Στη συνέχεια εισάγουμε το React component Buttons και τα styles από το App.module.css. Γράφουμε τις ετικέτες μας και εφαρμόζουμε σε αυτές στυλ, καθώς και τοποθετούμε το React component Buttons:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Χρησιμοποιήσαμε τη λέξη classes για το όνομα του αντικειμένου, που περιέχει τα στυλ, το οποίο εισάγουμε από το App.module.css. Όπως και στην προηγούμενη περίπτωση, μπορείτε να ονομάσετε αυτό το αντικείμενο όπως σας βολεύει.

Έμειναν μερικά μικρά βήματα. Αλλάζουμε το όνομα του αρχείου index.css σύμφωνα με την σύμβαση σε index.module.css και στο αρχείο index.js μην ξεχάσουμε να αντικαταστήσουμε τη γραμμή εισαγωγής:

import "./index.css";

Με τη γραμμή:

import "./index.module.css";

Τώρα μπορούμε να δούμε στο πρόγραμμα περιήγησης το αποτέλεσμα της εργασίας της εφαρμογής μας.

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

Είναι σημαντικό επίσης ότι τα CSS modules δεν απαγορεύουν την εισαγωγή και των συνηθισμένων εξωτερικών CSS αρχείων.

Ακολουθώντας τη θεωρία από το μάθημα, καθαρίστε το React component App της εφαρμογής σας inputs, που δημιουργήσατε στις ασκήσεις του προηγούμενου μαθήματος, και επίσης τοποθετήστε σε αυτό, αυτό που δημιουργήσατε, Inputs σε κάποιο στυλισμένο div. Προσθέστε στο App έναν στυλισμένο τίτλο. Όλα αυτά τοποθετήστε σε κάποιο άλλο div. Τα στυλ για τις ετικέτες του React component App γράψτε τα στο App.modules.css.

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