Kaj je MUI in kako ga lahko uporabite v svojih projektih ReactJS?

Septembra 2021 je podjetje, prej znano kot Material-UI, spremenilo ime v MUI. Ta sprememba se je zgodila predvsem zato, ker mnogi ljudje niso mogli razlikovati Material-UI od Material Design (sistem oblikovanja).

MUI se je začel kot implementacija materialnega oblikovanja, prilagojenega za aplikacije React. Danes se blagovna znamka širi in želi ustvariti nov sistem oblikovanja, ki bo alternativa Material Design.

Kratica MUI pomeni Material za gradnjo uporabniških vmesnikov, v tem članku pa se boste naučili, kako natančno uporabiti MUI za izgradnjo uporabniških vmesnikov React.

Kako dostopati do MUI v Reactu?

MUI je na voljo kot paket npm. Zato je vse, kar morate storiti za dostop do njega, izvesti naslednjo vrstico kode v vašem projektu React:

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

Ob predpostavki, da ste že nameščen React na vaši napravi, imate popoln dostop do knjižnice MUI in vseh njenih komponent. MUI ima več kot sto različnih komponent, ki spadajo v eno od naslednjih kategorij:

• Vhodi
• Prikaz podatkov
• Povratne informacije
• Površine
• Navigacija
• Postavitev
• Utils
• Podatkovna mreža
• Datum čas

Po namestitvi MUI kot paketa npm je uporaba knjižnice v vašem projektu tako preprosta kot uvoz datoteke zahtevano komponento v ustrezni datoteki in vstavljanje vaših stilskih nastavitev na določenih mestih uporabniški vmesnik.

Če želite ustvariti stran za prijavo za svojo aplikacijo React, je to več komponent MUI, ki jih lahko uporabite, ki bodo prihranile čas in vam pomagale ustvariti čist dizajn.

Ustvarjanje komponente za prijavo React

Če želite ustvariti novo komponento v Reactu, se preprosto pomaknite do Reactove mape src in ustvarite novo mapo komponent. Mapa komponent je lahko dom za vse vaše komponente, začenši s komponento za prijavo.

Povezano: Kaj je ReactJS in za kaj se lahko uporablja?

Datoteka Signin.js

uvozi React iz 'react';
funkcija Signin() {
vrnitev (

);
}
izvoz privzeta prijava;

Ko ustvarite svojo komponento za prijavo, je čas, da jo povežete s svojo aplikacijo React tako, da jo uvozite v komponento aplikacije (ki se nahaja v mapi src).

Posodobljena datoteka App.js

uvozi React iz 'react';
uvozi prijavo iz './components/Signin';
funkcija App() {
vrnitev (






);
}
izvoz privzete aplikacije;

Zdaj lahko začnete raziskovati komponente MUI, ki jih želite uporabiti na svoji strani za prijavo.

Kaj je tipografska komponenta?

Tipografska komponenta spada v kategorijo prikaza podatkov MUI in ima trinajst privzetih različic. Tej vključujejo:

• h1
• h2
• h3
• h4
• h5
• h6
• podnaslov1
• podnaslov2
• telo 1
• telo 2
• gumb
• napis
• čez črto

Različica, ki jo izberete, mora biti odvisna od besedila, ki ga želite prikazati. Na primer, če želite prikazati naslov, lahko v uporabniškem vmesniku uporabite katero koli od šestih različic naslova. Preprosto vstavite variantni rekvizit in izbrano vrednost v komponento tipografije.

Uporaba primera tipografske komponente

uvozi React iz 'react';
uvozi tipografijo iz '@mui/material/Typography';
funkcija Signin() {
vrnitev (


 Prijaviti se 



);
}
izvoz privzeta prijava;

Pomembna ugotovitev zgornje kode je, da jo boste morali vsakič, ko vstavite novo komponento v uporabniški vmesnik, tudi uvoziti na vrh datoteke komponente React. Posodobitev vaše komponente za prijavo s komponento tipografije (kot je razvidno iz zgornje kode) bo v vašem brskalniku ustvarila naslednji izhod:

Kaj je komponenta besedilnega polja?

Komponenta besedilnega polja spada v kategorijo vnosa. Ta komponenta ima dve preprosti funkciji; uporabnikom omogoča vnos ali urejanje besedila v uporabniškem vmesniku. Komponenta besedilnega polja uporablja tri različice, in sicer orisano, izpolnjeno in standardno, pri čemer je orisana varianta privzeta. Če torej želite uporabiti privzeto komponento besedilnega polja, vam ni treba vključiti variantnega propa. Komponenta polja besedila uporablja tudi več drugih rekvizitov, vključno z oznako, obvezno, vrsto, id, onemogočeno itd.

Uporaba primera komponente besedilnega polja

uvozi React iz 'react';
uvozite TextField iz '@mui/material/TextField';
uvozi tipografijo iz '@mui/material/Typography';
funkcija Signin() {
vrnitev (


 Prijaviti se 
label="E-poštni naslov"
zahtevano
id="e-pošta"
ime="e-pošta"
/>
label="Geslo"
zahtevano
id="geslo"
ime="geslo"
type="geslo"
/>



);
}
izvoz privzeta prijava;

Zgornja koda bo v vašem brskalniku ustvarila naslednji izhod:

Kot že ime pove, komponenta povezave deluje na enak način kot navadna povezava CSS. Spada v kategorijo navigacije in ima tradicionalne href in ciljne rekvizite. Poleg tega ima barvo, različico in podčrtano podlago.

Povezano: Kako uporabljati rekvizite v ReactJS

Vendar vam ni treba uporabljati dodatnih rekvizitov, razen če želite, da je vaša povezava videti edinstvena. Na primer, privzeta vrednost podčrtanega rekvizita je »vedno«, drugi dve vrednosti, ki ju lahko dodelite prop, pa sta »none« in »hover«.

Zato morate v komponento vključiti podčrtaj samo takrat, ko ne želite podčrtanja ali ko želite, da ima lebdeče stanje.

pozabi geslo?

Če vstavite zgornjo kodo v vašo obstoječo komponento za prijavo, boste v brskalniku ustvarili naslednji izhod:

Kaj je komponenta gumba?

Komponenta gumba prav tako spada v kategorijo vnosa in se drži splošne funkcionalnosti gumbov, saj vašo aplikacijo sporoča dejanja uporabnika. Ta komponenta uporablja eno od treh različic (besedilo, vsebovano in oris), vsaka različica pa se lahko pojavi v enem od treh stanj – primarnega, onemogočenega in povezanega.

Privzeta različica komponente gumba je besedilo. Če torej želite vsebovani ali orisani gumb, boste morali uporabiti variantni prop, da to označite. Poleg variantnega rekvizita ima komponenta gumba med drugim tudi upravljalnik onclick in barvni rekvizit.

Uporaba primera komponente gumba

 Prijaviti se

Če vstavite zgornjo kodo v komponento za prijavo, bo vaš uporabniški vmesnik posodobljen, da bo videti takole:

Zdaj imate interaktivni gumb, ki lebdi, ko miška zažene preko njega. Toda vse komponente so vodoravne in ne izgleda super.

Kaj je komponenta škatle?

Theboxcomponent je točno tisto, kar potrebujete za organizacijo pomožnih komponent (kot je komponenta gumba) v vaši aplikaciji React. Komponenta škatle uporablja ansx prop, ki ima dostop do vseh sistemskih lastnosti (kot sta višina in širina), ki jih potrebujete za organizacijo komponent v uporabniškem vmesniku.

Uporaba primera komponente Box

uvozi React iz 'react';
uvozi povezavo iz '@mui/material/Link';
uvozite TextField iz '@mui/material/TextField';
uvozi tipografijo iz '@mui/material/Typography';
uvozi { Button, Box } iz '@mui/material';
funkcija Signin() {
vrnitev (


sx={{
moj: 8,
zaslon: 'flex',
flexDirection: 'stolpec',
alignItems: 'center',
}}>
 Prijaviti se 
label="E-poštni naslov"
zahtevano
id="e-pošta"
ime="e-pošta"
margin="normalno"
/>
label="Geslo"
zahtevano
id="geslo"
ime="geslo"
type="geslo"
margin="normalno"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
pozabi geslo?

varianta="vsebovano"
sx={{mt: 2}}
>
Prijaviti se





);
}
izvoz privzeta prijava;

Z ovijanjem boxcomponent okoli pomožnih komponent (in uporabo sx prop) v zgornji kodi boste učinkovito ustvarili strukturo prilagodljivega stolpca. Zgornja koda bo ustvarila naslednjo stran za prijavo React v vašem brskalniku:

Kaj je komponenta mreže MUI?

Mrežna komponenta je še ena uporabna komponenta MUI za učenje. Spada v kategorijo postavitve MUI in olajša odzivnost. Razvijalcu omogoča, da doseže odzivno zasnovo zaradi sistema postavitve z 12 stolpci. Ta sistem postavitve uporablja pet privzetih prelomnih točk MUI za ustvarjanje aplikacij, ki se prilagajajo kateri koli velikosti zaslona. Te prelomne točke vključujejo:

• xs (zelo majhna in se začne pri 0px)
• sm (majhen in se začne pri 600px)
• md (srednja in se začne pri 900 slikovnih pikah)
• lg (veliko in se začne pri 1200px)
• xl (izjemno velik in se začne pri 1536px)

Komponenta MUIgrid deluje na enak način kot lastnost flexbox CSS, saj ima enosmerni sistem nadrejeni-podrejeni, ki temelji na dveh vrstah postavitev – vsebnik (nadrejeni) in elementi (podrejeni). Vendar komponenta mreže MUI olajša ugnezdeno mrežo, kjer je predmet lahko tudi vsebnik.

Raziščite druge možnosti oblikovanja za aplikacije ReactJS

Ta članek vas uči, kako namestiti in uporabljati knjižnico MUI v vaših aplikacijah React. Naučite se uporabljati nekatere osnovne komponente (kot je tipografija) in nekatere naprednejše strukturne komponente (kot je komponenta škatle).

Knjižnica MUI je enostavna za uporabo, učinkovita in odlično deluje z aplikacijami React. Toda to ne pomeni, da je to edina možnost oblikovanja, ki je na voljo razvijalcem Reacta. Če gradite aplikacijo React, lahko za oblikovanje aplikacije uporabite knjižnico MUI ali kateri koli okvir CSS.

Kadeisha Kean (33 objavljenih člankov)

Kadeisha Kean je razvijalka programske opreme s celotnim skladom in pisateljica tehničnega/tehnološkega področja. Ima izrazito sposobnost poenostavitve nekaterih najbolj zapletenih tehnoloških konceptov; izdelava materiala, ki ga lahko zlahka razume vsak novinec v tehnologiji. Navdušena je nad pisanjem, razvojem zanimive programske opreme in potovanjem po svetu (skozi dokumentarne filme).

Več od Kadeisha Kean