Το Material UI (MUI) είναι μια δημοφιλής βιβλιοθήκη στοιχείων που εφαρμόζει το σύστημα Σχεδιασμού Υλικού της Google. Παρέχει ένα ευρύ φάσμα προ-ενσωματωμένων στοιχείων διεπαφής χρήστη που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε λειτουργικές και οπτικά ελκυστικές διεπαφές.
ιστορία του σπιτιού κατά διεύθυνση δωρεάνMUO Το βίντεο της ημέρας ΚΥΛΙΣΤΕ ΓΙΑ ΝΑ ΣΥΝΕΧΙΣΕΤΕ ΜΕ ΠΕΡΙΕΧΟΜΕΝΟ
Παρόλο που έχει σχεδιαστεί για το React, μπορείτε να επεκτείνετε τις δυνατότητές του σε άλλα πλαίσια εντός του οικοσυστήματος του React, όπως το Next.js.
Ξεκινώντας με το React Hook Form and Material UI
React Hook Form είναι μια δημοφιλής βιβλιοθήκη που παρέχει έναν απλό και δηλωτικό τρόπο δημιουργίας, διαχείρισης και επικύρωσης φορμών.
Με την ενσωμάτωση Διεπαφή χρήστη υλικού Τα στοιχεία και τα στυλ διεπαφής χρήστη, μπορείτε να δημιουργήσετε όμορφες φόρμες που είναι εύχρηστες και να εφαρμόσετε μια συνεπή σχεδίαση στην εφαρμογή Next.js.
Για να ξεκινήσετε, δημιουργήστε ένα έργο Next.js τοπικά. Για τους σκοπούς αυτού του οδηγού, εγκαταστήστε το την τελευταία έκδοση του Next.js που χρησιμοποιεί τον κατάλογο της εφαρμογής .
npx create-next-app@latest next-project --app
Στη συνέχεια, εγκαταστήστε αυτά τα πακέτα στο έργο σας:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Ακολουθεί μια προεπισκόπηση του τι θα δημιουργήσετε: