Τι είναι το MUI και πώς μπορείτε να το χρησιμοποιήσετε στα έργα σας στο ReactJS;

Τον Σεπτέμβριο του 2021, η εταιρεία που ήταν παλαιότερα γνωστή ως Material-UI άλλαξε το όνομά της σε MUI. Αυτή η αλλαγή συνέβη κυρίως επειδή πολλοί άνθρωποι δεν μπορούσαν να διακρίνουν το Material-UI από το Material Design (ένα σύστημα σχεδιασμού).

Το MUI ξεκίνησε ως εφαρμογή του Material Design προσαρμοσμένο για εφαρμογές React. Σήμερα η επωνυμία επεκτείνεται και αναζητά να δημιουργήσει ένα νέο σύστημα σχεδιασμού, το οποίο θα είναι μια εναλλακτική λύση στο Material Design.

Το ακρωνύμιο MUI σημαίνει Υλικό για τη δημιουργία διεπαφής χρήστη και σε αυτό το άρθρο, θα μάθετε ακριβώς πώς να χρησιμοποιείτε το MUI για τη δημιουργία διεπαφών React.

Πώς να αποκτήσετε πρόσβαση στο MUI στο React;

Το MUI είναι διαθέσιμο ως πακέτο npm. Επομένως, το μόνο που χρειάζεται να κάνετε για να αποκτήσετε πρόσβαση είναι να εκτελέσετε την ακόλουθη γραμμή κώδικα στο έργο React:

npm εγκατάσταση @mui/material @emotion/react @emotion/styled

Υποθέτοντας ότι το έχετε ήδη εγκαταστήσατε το React στη συσκευή σας, έχετε πλήρη πρόσβαση στη βιβλιοθήκη MUI και σε όλα τα στοιχεία της. Το MUI έχει πάνω από εκατό διαφορετικά στοιχεία που εμπίπτουν σε μία από τις ακόλουθες κατηγορίες:

• Εισροές
• Εμφάνιση δεδομένων
• Ανατροφοδότηση
• Επιφάνειες
• Πλοήγηση
• Σχέδιο
• Utils
• Πλέγμα Δεδομένων
• Ημερομηνία ώρα

Μετά την εγκατάσταση του MUI ως πακέτου npm, η χρήση της βιβλιοθήκης στο έργο σας είναι τόσο απλή όσο η εισαγωγή του απαιτούμενο στοιχείο στο κατάλληλο αρχείο και εισάγοντας τις στυλιστικές σας προτιμήσεις σε συγκεκριμένες τοποθεσίες παντού το UI.

Εάν θέλετε να δημιουργήσετε μια σελίδα σύνδεσης για την εφαρμογή React, είναι πολλά στοιχεία MUI που μπορείτε να χρησιμοποιήσετε, τα οποία θα εξοικονομήσουν χρόνο και θα σας βοηθήσουν να δημιουργήσετε ένα καθαρό σχέδιο.

Δημιουργία του στοιχείου εισόδου React

Για να δημιουργήσετε ένα νέο στοιχείο στο React, απλώς μεταβείτε στον φάκελο src του React και δημιουργήστε έναν νέο φάκελο στοιχείων. Ο φάκελος στοιχείων μπορεί να είναι το σπίτι για όλα τα στοιχεία σας, ξεκινώντας από το στοιχείο εισόδου.

Σχετίζεται με: Τι είναι το ReactJS και σε τι μπορεί να χρησιμοποιηθεί;

Το αρχείο Signin.js

εισαγωγή Αντιδράστε από το 'react';
συνάρτηση Signin() {
ΕΠΙΣΤΡΟΦΗ (

);
}
εξαγωγή προεπιλογή Είσοδος.

Αφού δημιουργήσετε το στοιχείο σύνδεσης, ήρθε η ώρα να το συνδέσετε με την εφαρμογή React εισάγοντάς το στο στοιχείο της εφαρμογής σας (που βρίσκεται στον φάκελο src).

Το ενημερωμένο αρχείο App.js

εισαγωγή Αντιδράστε από το 'react';
εισαγωγή Είσοδος από './components/Signin';
λειτουργία Εφαρμογή() {
ΕΠΙΣΤΡΟΦΗ (






);
}
εξαγωγή προεπιλεγμένη εφαρμογή?

Τώρα μπορείτε να ξεκινήσετε την εξερεύνηση των στοιχείων MUI που θέλετε να χρησιμοποιήσετε στη σελίδα εισόδου σας.

Τι είναι το στοιχείο τυπογραφίας;

Το στοιχείο τυπογραφίας ανήκει στην κατηγορία εμφάνισης δεδομένων του MUI και έχει δεκατρείς προεπιλεγμένες παραλλαγές. Αυτά περιλαμβάνουν:

• h1
• h2
• h3
• h4
• h5
• h6
• υπότιτλος 1
• υπότιτλος 2
• σώμα 1
• σώμα 2
• κουμπί
• λεζάντα
• υπεργραμμίζουν

Η παραλλαγή που θα επιλέξετε πρέπει να εξαρτάται από το κείμενο που θέλετε να εμφανίσετε. Για παράδειγμα, εάν θέλετε να εμφανίσετε μια επικεφαλίδα, μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις έξι παραλλαγές επικεφαλίδων στη διεπαφή χρήστη σας. Απλώς εισαγάγετε το στήριγμα παραλλαγής και την επιλεγμένη τιμή στο στοιχείο τυπογραφίας.

Χρήση του παραδείγματος στοιχείου τυπογραφίας

εισαγωγή Αντιδράστε από το 'react';
εισαγωγή Τυπογραφίας από το '@mui/material/Typography';
συνάρτηση Signin() {
ΕΠΙΣΤΡΟΦΗ (


 Συνδεθείτε 



);
}
εξαγωγή προεπιλογή Είσοδος.

Ένα σημαντικό στοιχείο από τον παραπάνω κώδικα είναι ότι κάθε φορά που εισάγετε ένα νέο στοιχείο στη διεπαφή χρήστη σας, θα πρέπει επίσης να το εισάγετε στο επάνω μέρος του αρχείου στοιχείων React. Η ενημέρωση του στοιχείου εισόδου σας με το στοιχείο τυπογραφίας (όπως φαίνεται στον παραπάνω κώδικα) θα παράγει την ακόλουθη έξοδο στο πρόγραμμα περιήγησής σας:

Τι είναι το στοιχείο πεδίου κειμένου;

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

Χρησιμοποιώντας το Παράδειγμα στοιχείου πεδίου κειμένου

εισαγωγή Αντιδράστε από το 'react';
εισαγωγή TextField από το '@mui/material/TextField';
εισαγωγή Τυπογραφίας από το '@mui/material/Typography';
συνάρτηση Signin() {
ΕΠΙΣΤΡΟΦΗ (


 Συνδεθείτε 
label="Διεύθυνση ηλεκτρονικού ταχυδρομείου"
απαιτείται
id = "email"
όνομα = "email"
/>
label="Κωδικός πρόσβασης"
απαιτείται
id = "κωδικός πρόσβασης"
όνομα = "κωδικός πρόσβασης"
πληκτρολογήστε "κωδικός πρόσβασης"
/>



);
}
εξαγωγή προεπιλογή Είσοδος.

Ο παραπάνω κώδικας θα παράγει την ακόλουθη έξοδο στο πρόγραμμα περιήγησής σας:

Όπως υποδηλώνει το όνομα, το στοιχείο σύνδεσης λειτουργεί με τον ίδιο τρόπο όπως ένας απλός σύνδεσμος CSS. Εμπίπτει στην κατηγορία πλοήγησης και έχει τα παραδοσιακά σκηνικά href και target. Επιπλέον, έχει χρώμα, παραλλαγή και υπογράμμιση.

Σχετίζεται με: Πώς να χρησιμοποιήσετε τα Props στο ReactJS

Ωστόσο, δεν χρειάζεται να χρησιμοποιήσετε πρόσθετα στηρίγματα εκτός εάν θέλετε ο σύνδεσμός σας να φαίνεται μοναδικός. Για παράδειγμα, η προεπιλεγμένη τιμή του υπογράμμισης στηρίγματος είναι "πάντα" και οι άλλες δύο τιμές που μπορείτε να εκχωρήσετε στο στηρίγμα είναι "none" και "hover".

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

ξεχάσω τον κωδικό πρόσβασης;

Η εισαγωγή του παραπάνω κώδικα στο υπάρχον στοιχείο εισόδου θα παράγει την ακόλουθη έξοδο στο πρόγραμμα περιήγησής σας:

Τι είναι το στοιχείο κουμπιού;

Το στοιχείο κουμπιού ανήκει επίσης στην κατηγορία εισαγωγής και συμμορφώνεται με τη γενική λειτουργικότητα του κουμπιού, καθώς επικοινωνεί τις ενέργειες ενός χρήστη στην εφαρμογή σας. Αυτό το στοιχείο χρησιμοποιεί μία από τις τρεις παραλλαγές (κείμενο, περιεχόμενο και περίγραμμα) και κάθε παραλλαγή μπορεί να εμφανίζεται σε μία από τις τρεις καταστάσεις—κύρια, απενεργοποιημένη και συνδεδεμένη.

Μια προεπιλεγμένη παραλλαγή στοιχείου κουμπιού είναι το κείμενο. Επομένως, εάν θέλετε ένα κουμπί με περιγράμματα σε εμπορευματοκιβώτια, θα χρειαστεί να χρησιμοποιήσετε το στήριγμα παραλλαγής για να το υποδείξετε. Εκτός από το στήριγμα της παραλλαγής, το στοιχείο κουμπιού διαθέτει επίσης έναν χειριστή onclick και μια έγχρωμη βάση—μεταξύ άλλων.

Χρησιμοποιώντας το Παράδειγμα στοιχείου κουμπιού

 Συνδεθείτε

Η εισαγωγή του παραπάνω κώδικα στο στοιχείο σύνδεσης θα ενημερώσει τη διεπαφή χρήστη ώστε να έχει την εξής μορφή:

Τώρα έχετε ένα διαδραστικό κουμπί που αιωρείται όταν το ποντίκι περνάει από πάνω του. Αλλά όλα τα εξαρτήματα είναι οριζόντια και δεν φαίνεται υπέροχο.

Τι είναι το στοιχείο Box;

Το Theboxcomponent είναι αυτό ακριβώς που χρειάζεστε για να οργανώσετε τα βοηθητικά στοιχεία (όπως το στοιχείο κουμπιού) στην εφαρμογή React. Το στοιχείο box χρησιμοποιεί ansx prop, το οποίο έχει πρόσβαση σε όλες τις ιδιότητες συστήματος (όπως ύψος και πλάτος) που χρειάζεστε για να οργανώσετε τα στοιχεία στη διεπαφή χρήστη σας.

Χρησιμοποιώντας το Παράδειγμα στοιχείου πλαισίου

εισαγωγή Αντιδράστε από το 'react';
Εισαγωγή συνδέσμου από το '@mui/material/Link';
εισαγωγή TextField από το '@mui/material/TextField';
εισαγωγή Τυπογραφίας από το '@mui/material/Typography';
εισαγωγή { Button, Box } από το '@mui/material';
συνάρτηση Signin() {
ΕΠΙΣΤΡΟΦΗ (


sx={{
μου: 8,
οθόνη: 'flex',
flexDirection: 'στήλη',
alignItems: 'κέντρο',
}}>
 Συνδεθείτε 
label="Διεύθυνση ηλεκτρονικού ταχυδρομείου"
απαιτείται
id = "email"
όνομα = "email"
περιθώριο = "κανονικό"
/>
label="Κωδικός πρόσβασης"
απαιτείται
id = "κωδικός πρόσβασης"
όνομα = "κωδικός πρόσβασης"
πληκτρολογήστε "κωδικός πρόσβασης"
περιθώριο = "κανονικό"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
ξεχάσω τον κωδικό πρόσβασης;

παραλλαγή = "περιέχεται"
sx={{mt: 2}}
>
Συνδεθείτε





);
}
εξαγωγή προεπιλογή Είσοδος.

Τυλίγοντας το στοιχείο box γύρω από τα βοηθητικά στοιχεία (και χρησιμοποιώντας το sx prop) στον παραπάνω κώδικα, θα δημιουργήσετε αποτελεσματικά μια δομή ευέλικτης στήλης. Ο παραπάνω κώδικας θα δημιουργήσει την ακόλουθη σελίδα σύνδεσης React στο πρόγραμμα περιήγησής σας:

Τι είναι το στοιχείο MUI Grid;

Το στοιχείο πλέγματος είναι ένα άλλο χρήσιμο στοιχείο MUI για εκμάθηση. Εμπίπτει στην κατηγορία διάταξης του MUI και διευκολύνει την απόκριση. Επιτρέπει σε έναν προγραμματιστή να επιτύχει σχεδιασμό με απόκριση λόγω του συστήματος διάταξης 12 στηλών. Αυτό το σύστημα διάταξης χρησιμοποιεί τα πέντε προεπιλεγμένα σημεία διακοπής του MUI για τη δημιουργία εφαρμογών που προσαρμόζονται σε οποιοδήποτε μέγεθος οθόνης. Αυτά τα σημεία διακοπής περιλαμβάνουν:

• xs (εξαιρετικά μικρό και ξεκινά από 0 px)
• sm (μικρό και ξεκινά από 600 px)
• md (μεσαίο και ξεκινά από 900 px)
• lg (μεγάλο και ξεκινά από 1200 px)
• xl (εξαιρετικά μεγάλο και ξεκινά από 1536 px)

Το στοιχείο MUIgrid λειτουργεί με τον ίδιο τρόπο όπως η ιδιότητα flexbox CSS, καθώς έχει ένα μονοκατευθυντικό σύστημα γονέα-παιδιού που βασίζεται σε δύο τύπους διατάξεων—κοντέινερ (γονέας) και αντικείμενα (παιδί). Ωστόσο, το στοιχείο πλέγματος MUI διευκολύνει ένα ένθετο πλέγμα, όπου ένα αντικείμενο μπορεί επίσης να είναι ένα κοντέινερ.

Εξερευνήστε άλλες επιλογές στυλ για εφαρμογές ReactJS

Αυτό το άρθρο σάς διδάσκει πώς να εγκαταστήσετε και να χρησιμοποιήσετε τη βιβλιοθήκη MUI στις εφαρμογές σας React. Μαθαίνετε πώς να χρησιμοποιείτε ορισμένα βασικά στοιχεία (όπως η τυπογραφία) και μερικά από τα πιο προηγμένα δομικά στοιχεία (όπως το στοιχείο κουτιού).

Η βιβλιοθήκη MUI είναι εύκολη στη χρήση, αποτελεσματική και λειτουργεί εξαιρετικά με τις εφαρμογές React. Αλλά αυτό δεν σημαίνει ότι είναι η μόνη επιλογή στυλ που είναι διαθέσιμη για τους προγραμματιστές του React. Εάν δημιουργείτε μια εφαρμογή React, μπορείτε ελεύθερα να χρησιμοποιήσετε τη βιβλιοθήκη MUI ή οποιοδήποτε πλαίσιο CSS για το στυλ της εφαρμογής σας.

Kadeisha Kean (Δημοσιεύτηκαν 33 άρθρα)

Η Kadeisha Kean είναι προγραμματιστής λογισμικού Full-Stack και συγγραφέας τεχνικής/τεχνολογίας. Έχει τη διακριτή ικανότητα να απλοποιεί μερικές από τις πιο σύνθετες τεχνολογικές έννοιες. παραγωγή υλικού που μπορεί να γίνει εύκολα κατανοητό από κάθε αρχάριο της τεχνολογίας. Είναι παθιασμένη με τη συγγραφή, την ανάπτυξη ενδιαφέροντος λογισμικού και το ταξίδι στον κόσμο (μέσω ντοκιμαντέρ).

Περισσότερα από την Kadeisha Kean