Ce este MUI și cum îl puteți utiliza în proiectele dvs. ReactJS?

În septembrie 2021, compania cunoscută anterior sub numele de Material-UI și-a schimbat numele în MUI. Această schimbare a avut loc în principal pentru că mulți oameni nu au putut distinge Material-UI de Material Design (un sistem de design).

MUI a început ca o implementare a Material Design, adaptată pentru aplicațiile React. Astăzi, brandul se extinde și caută să creeze un nou sistem de design, care va fi o alternativă la Material Design.

Acronimul MUI înseamnă Material pentru a construi interfețe de utilizare, iar în acest articol, veți afla exact cum să utilizați MUI pentru a crea interfețe React.

Cum se accesează MUI în React?

MUI este disponibil ca pachet npm. Prin urmare, tot ce trebuie să faceți pentru a-l accesa este să executați următoarea linie de cod în cadrul proiectului dvs. React:

npm install @mui/material @emotion/react @emotion/styled

Presupunând că ai făcut-o deja instalat React pe dispozitivul dvs, aveți acces complet la biblioteca MUI și la toate componentele acesteia. MUI are peste o sută de componente diferite care se încadrează în una dintre următoarele categorii:

• Intrări
• Afișarea datelor
• Părere
• Suprafeţe
• Navigare
• Aspect
• Utilaje
• Grila de date
• Data/Ora

După instalarea MUI ca pachet npm, utilizarea bibliotecii în cadrul proiectului este la fel de simplă ca și importarea fișierului componenta necesară în fișierul corespunzător și inserând preferințele dvs. de stil în anumite locații UI.

Dacă doriți să creați o pagină de conectare pentru aplicația dvs. React, acestea sunt câteva componente MUI pe care le puteți utiliza, care vor economisi timp și vă vor ajuta să creați un design curat.

Crearea componentei de conectare React

Pentru a crea o componentă nouă în React, pur și simplu navigați la folderul src al lui React și creați un nou folder de componentă. Dosarul de componente poate fi acasă pentru toate componentele dvs., începând cu componenta de conectare.

Legate de: Ce este ReactJS și pentru ce poate fi folosit?

Fișierul Signin.js

import React din 'react';
function Signin() {
întoarcere (

);
}
export implicit Login;

După crearea componentei de conectare, este timpul să o conectați la aplicația React importând-o în componenta aplicației (situată în folderul src).

Fișierul App.js actualizat

import React din 'react';
import Signin din './components/Signin';
function App() {
întoarcere (






);
}
exportați aplicația implicită;

Acum puteți începe să explorați componentele MUI pe care doriți să le utilizați în pagina de conectare.

Ce este componenta tipografie?

Componenta de tipografie aparține categoriei de afișare a datelor MUI și are treisprezece variante implicite. Acestea includ:

• h1
• h2
• h3
• h4
• h5
• h6
• subtitrare1
• subtitrare2
• corp1
• corp2
• buton
• legendă
• supraliniere

Varianta pe care o selectați ar trebui să depindă de textul pe care doriți să-l afișați. De exemplu, dacă doriți să afișați un titlu, sunteți liber să utilizați oricare dintre cele șase variante de titlu din interfața de utilizare. Pur și simplu introduceți prop varianta și valoarea selectată în componenta tipografie.

Utilizarea exemplului de componentă tipografie

import React din 'react';
import Typography din „@mui/material/Typography”;
function Signin() {
întoarcere (


 Conectare 



);
}
export implicit Login;

O concluzie importantă din codul de mai sus este că de fiecare dată când inserați o componentă nouă în interfața de utilizare, va trebui să o importați și în partea de sus a fișierului de componentă React. Actualizarea componentei de conectare cu componenta de tipografie (așa cum se vede în codul de mai sus) va produce următoarea ieșire în browser:

Ce este componenta câmp de text?

Componenta câmp de text aparține categoriei de introducere. Această componentă are două funcții simple; permite utilizatorilor să introducă sau să editeze textul într-o interfață de utilizare. Componenta câmpului text utilizează trei variante, și anume conturat, completat și standard, varianta conturată fiind cea implicită. Prin urmare, dacă doriți să utilizați componenta implicită de câmp de text, nu trebuie să includeți varianta prop. Componenta câmpului de text utilizează, de asemenea, câteva alte elemente de recuzită, inclusiv etichetă, obligatoriu, tip, id, dezactivat etc.

Utilizarea exemplului de componentă câmp text

import React din 'react';
import TextField din „@mui/material/TextField”;
import Typography din „@mui/material/Typography”;
function Signin() {
întoarcere (


 Conectare 
label="Adresa de e-mail"
necesar
id="email"
name="email"
/>
label="Parolă"
necesar
id="parolă"
nume="parolă"
tip="parolă"
/>



);
}
export implicit Login;

Codul de mai sus va produce următoarele rezultate în browser:

După cum sugerează și numele, componenta de legătură funcționează în același mod ca o legătură CSS simplă. Se încadrează în categoria de navigare și are tradiționalele href și recuzită țintă. În plus, are o culoare, o variantă și o recuzită subliniată.

Legate de: Cum să utilizați elementele de recuzită în ReactJS

Cu toate acestea, nu este nevoie să folosiți elemente de recuzită suplimentare decât dacă doriți ca linkul dvs. să arate unic. De exemplu, valoarea implicită a suportului de subliniere este „întotdeauna”, iar celelalte două valori pe care le puteți atribui recuzitei sunt „niciunul” și „hover”.

Prin urmare, trebuie să includeți prop de subliniere în componenta dvs. atunci când doriți să nu aveți subliniere sau când doriți să aibă o stare de hover.

parola uitata?

Inserarea codului de mai sus în componenta de conectare existentă va produce următoarea ieșire în browser:

Ce este componenta butonului?

Componenta butonului aparține, de asemenea, categoriei de intrare și aderă la funcționalitatea generală a butonului, acesta comunică acțiunile unui utilizator către aplicația dvs. Această componentă folosește una dintre cele trei variante (text, conținut și contur), iar fiecare variantă poate apărea într-una din cele trei stări: principal, dezactivat și legat.

O variantă implicită a componentei butonului este textul. Prin urmare, dacă doriți un buton de conținut sau conturat, va trebui să utilizați varianta de prop pentru a indica acest lucru. Pe lângă varianta de prop, componenta de buton are și un handler onclick și o prop de culoare, printre altele.

Utilizarea exemplului de componentă a butonului

 Conectare

Inserarea codului de mai sus în componenta de conectare va actualiza interfața de utilizare astfel încât să arate astfel:

Acum aveți un buton interactiv care plutește când mouse-ul trece peste el. Dar toate componentele sunt orizontale și nu arată grozav.

Ce este componenta cutiei?

Theboxcomponent este exact ceea ce aveți nevoie pentru a organiza componentele utilitare (cum ar fi componenta buton) în aplicația dvs. React. Componenta casetă folosește ansx prop, care are acces la toate proprietățile sistemului (cum ar fi înălțimea și lățimea) de care aveți nevoie pentru a organiza componentele în interfața de utilizare.

Utilizarea exemplului de componentă cutie

import React din 'react';
import Link de la „@mui/material/Link”;
import TextField din „@mui/material/TextField”;
import Typography din „@mui/material/Typography”;
import { Button, Box } din „@mui/material”;
function Signin() {
întoarcere (


sx={{
al meu: 8,
afișaj: „flex”,
flexDirection: „coloană”,
alignItems: „centru”,
}}>
 Conectare 
label="Adresa de e-mail"
necesar
id="email"
name="email"
margin="normal"
/>
label="Parolă"
necesar
id="parolă"
nume="parolă"
tip="parolă"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
parola uitata?

variant="contained"
sx={{mt: 2}}
>
Conectare





);
}
export implicit Login;

Prin împachetarea componentei box în jurul componentelor utilitare (și folosind sx prop) în codul de mai sus, veți crea efectiv o structură de coloană flexibilă. Codul de mai sus va produce următoarea pagină de conectare React în browser:

Ce este componenta MUI Grid?

Componenta grilă este o altă componentă MUI utilă de învățat. Se încadrează în categoria de aspect a MUI și facilitează capacitatea de răspuns. Permite unui dezvoltator să realizeze un design receptiv datorită sistemului său de aspect cu 12 coloane. Acest sistem de aspect utilizează cele cinci puncte de întrerupere implicite ale MUI pentru a crea aplicații care se adaptează la orice dimensiune a ecranului. Aceste puncte de întrerupere includ:

• xs (foarte mic și începe de la 0px)
• sm (mic și începe de la 600px)
• md (mediu și începe de la 900px)
• lg (mari și începe de la 1200px)
• xl (extra-larg și începe de la 1536px)

Componenta MUIgrid funcționează în același mod ca proprietatea CSS flexbox, prin faptul că are un sistem unidirecțional părinte-copil bazat pe două tipuri de layout-container (părinte) și articole (copil). Cu toate acestea, componenta grilă MUI facilitează o grilă imbricată, unde un articol poate fi și un container.

Explorați alte opțiuni de stil pentru aplicațiile ReactJS

Acest articol vă învață cum să instalați și să utilizați biblioteca MUI în aplicațiile dvs. React. Învățați cum să utilizați unele componente de bază (cum ar fi tipografia) și unele dintre componentele structurale mai avansate (cum ar fi componenta cutie).

Biblioteca MUI este ușor de utilizat, eficientă și funcționează excelent cu aplicațiile React. Dar asta nu înseamnă că este singura opțiune de stil disponibilă pentru dezvoltatorii React. Dacă construiți o aplicație React, sunteți liber să utilizați biblioteca MUI sau orice cadru CSS pentru a vă stila aplicația.

Kadeisha Kean (33 articole publicate)

Kadeisha Kean este un dezvoltator de software Full-Stack și un scriitor tehnic/tehnologic. Are capacitatea distinctă de a simplifica unele dintre cele mai complexe concepte tehnologice; producând material care poate fi ușor de înțeles de orice novice în tehnologie. Este pasionată de scris, de dezvoltare de software interesant și de călătorie prin lume (prin documentare).

Mai multe de la Kadeisha Kean