Mikä on MUI ja kuinka voit käyttää sitä ReactJS-projekteissasi?

Syyskuussa 2021 aiemmin nimellä Material-UI tunnettu yritys muutti nimensä MUI: ksi. Tämä muutos tapahtui pääasiassa siksi, että monet ihmiset eivät pystyneet erottamaan Material-UI: ta Material Designista (suunnittelujärjestelmä).

MUI alkoi React-sovelluksiin räätälöidyn Material Designin toteutuksena. Nykyään brändi laajenee ja pyrkii luomaan uuden suunnittelujärjestelmän, joka on vaihtoehto materiaalisuunnittelulle.

Lyhenne MUI tarkoittaa materiaalia käyttöliittymien rakentamiseen, ja tässä artikkelissa opit tarkalleen kuinka MUI: ta käytetään React-käyttöliittymien rakentamiseen.

Kuinka päästä MUI: iin Reactissa?

MUI on saatavana npm-pakettina. Siksi sinun tarvitsee vain suorittaa seuraava koodirivi React-projektissasi päästäksesi siihen:

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

Olettaen, että olet jo asennettu React laitteellesi, sinulla on täysi pääsy MUI-kirjastoon ja kaikkiin sen osiin. MUI: ssa on yli sata erilaista komponenttia, jotka kuuluvat johonkin seuraavista luokista:

• Tulot
• Datanäyttö
• Palaute
• Pinnat
• Navigointi
• Layout
• Utils
• Data Grid
• Treffiaika

Kun olet asentanut MUI: n npm-paketina, kirjaston käyttäminen projektissasi on yhtä helppoa kuin tiedoston tuominen vaadittava komponentti oikeaan tiedostoon ja lisää tyyliasetukset tiettyihin paikkoihin kaikkialla käyttöliittymä.

Jos haluat luoda kirjautumissivun React-sovelluksellesi, voit käyttää niitä useita MUI-komponentteja, jotka säästävät aikaa ja auttavat sinua luomaan selkeän suunnittelun.

React-sisäänkirjautumiskomponentin luominen

Jos haluat luoda uuden komponentin Reactissa, siirry Reactin src-kansioon ja luo uusi komponenttikansio. Komponenttikansio voi olla kaikkien komponenttien koti kirjautumiskomponentista alkaen.

Aiheeseen liittyvä: Mikä ReactJS on ja mihin sitä voidaan käyttää?

Signin.js-tiedosto

tuonti React from 'react';
function Signin() {
paluu (

);
}
Vie oletusarvoinen kirjautuminen;

Kun olet luonut kirjautumiskomponentin, on aika linkittää se React-sovellukseesi tuomalla se sovelluskomponenttiin (sijaitsee src-kansiossa).

Päivitetty App.js-tiedosto

tuonti React from 'react';
tuo sisäänkirjautuminen osoitteesta './components/Signin';
function App() {
paluu (






);
}
Vie oletussovellus;

Nyt voit alkaa tutkia MUI-komponentteja, joita haluat käyttää kirjautumissivullasi.

Mikä on typografiakomponentti?

Typografiakomponentti kuuluu MUI: n tietojen näyttöluokkaan ja sillä on kolmetoista oletusversiota. Nämä sisältävät:

• h1
• h2
• h3
• h4
• h5
• h6
• alaotsikko 1
• alaotsikko 2
• body1
• runko2
• -painiketta
• kuvateksti
• yliviivaus

Valitsemasi muunnelman pitäisi riippua näytettävästä tekstistä. Jos esimerkiksi haluat näyttää otsikon, voit vapaasti käyttää mitä tahansa kuudesta otsikkovaihtoehdosta käyttöliittymässäsi. Lisää vain varianttipotku ja valittu arvo typografiakomponenttiin.

Typografiakomponenttiesimerkin käyttäminen

tuonti React from 'react';
tuo typografia osoitteesta @mui/material/Typography;
function Signin() {
paluu (


 Kirjaudu sisään 



);
}
Vie oletusarvoinen kirjautuminen;

Tärkeä poiminta yllä olevasta koodista on, että aina kun lisäät uuden komponentin käyttöliittymään, sinun on myös tuotava se React-komponenttitiedoston yläosaan. Kirjautumiskomponentin päivittäminen typografiakomponentilla (kuten yllä olevasta koodista näkyy) tuottaa selaimeesi seuraavan tulosteen:

Mikä on tekstikenttäkomponentti?

Tekstikenttäkomponentti kuuluu syöttöluokkaan. Tällä komponentilla on kaksi yksinkertaista toimintoa; sen avulla käyttäjät voivat kirjoittaa tai muokata tekstiä käyttöliittymässä. Tekstikenttäkomponentissa käytetään kolmea muunnelmaa, jotka ovat ääriviivat, täytetty ja standardi, ja ääriviivat ovat oletusmuunnoksia. Siksi, jos haluat käyttää oletustekstikenttäkomponenttia, sinun ei tarvitse sisällyttää muunnelmaa. Tekstikenttäkomponentti käyttää myös useita muita rekvisiitta, kuten etiketti, pakollinen, tyyppi, tunnus, pois käytöstä jne.

Tekstikenttäkomponenttiesimerkin käyttäminen

tuonti React from 'react';
tuo tekstikenttä osoitteesta @mui/material/TextField;
tuo typografia osoitteesta @mui/material/Typography;
function Signin() {
paluu (


 Kirjaudu sisään 
label="Sähköpostiosoite"
vaaditaan
id="sähköposti"
name="sähköposti"
/>
label="Salasana"
vaaditaan
id="salasana"
name="salasana"
type="salasana"
/>



);
}
Vie oletusarvoinen kirjautuminen;

Yllä oleva koodi tuottaa seuraavan tulosteen selaimessasi:

Kuten nimestä voi päätellä, linkkikomponentti toimii samalla tavalla kuin tavallinen CSS-linkki. Se kuuluu navigointikategoriaan ja siinä on perinteiset href- ja kohde-rekvisiitta. Lisäksi siinä on väri, muunnelma ja alleviivaus.

Aiheeseen liittyvä: Propsien käyttäminen ReactJS: ssä

Sinun ei kuitenkaan tarvitse käyttää muita rekvisiitta, ellet halua linkin näyttävän ainutlaatuiselta. Esimerkiksi alleviivauksen oletusarvo on "aina" ja kaksi muuta arvoa, jotka voit määrittää ehdotukselle, ovat "ei mitään" ja "hover".

Siksi sinun tarvitsee vain sisällyttää alleviivaus komponenttiin, kun et halua alleviivausta tai kun haluat, että sillä on leijuva tila.

unohtaa salasana?

Yllä olevan koodin lisääminen olemassa olevaan kirjautumiskomponenttiin tuottaa selaimeesi seuraavan tulosteen:

Mikä on painikkeen komponentti?

Painikekomponentti kuuluu myös syöttöluokkaan ja noudattaa yleistä painiketoimintoa, ja se välittää käyttäjän toiminnot sovelluksellesi. Tämä komponentti käyttää yhtä kolmesta versiosta (teksti, sisältymä ja ääriviiva), ja jokainen versio voi esiintyä jossakin kolmesta tilasta – ensisijainen, poistettu käytöstä ja linkitetty.

Painikekomponentin oletusmuunnos on teksti. Siksi, jos haluat sisältää sisällön tai ääriviivapainikkeen, sinun on käytettävä muunnelmaa sen osoittamiseen. Varianttipotkun lisäksi painikekomponentissa on muun muassa onclick-käsittelijä ja väripotkuri.

Painikekomponentin esimerkki

 Kirjaudu sisään

Yllä olevan koodin lisääminen kirjautumiskomponenttiin päivittää käyttöliittymäsi seuraavanlaiselta:

Nyt sinulla on interaktiivinen painike, joka leijuu, kun hiiri kulkee sen päällä. Mutta kaikki komponentit ovat vaakasuorassa, eikä se näytä hyvältä.

Mikä on laatikon komponentti?

Thebox-komponentti on juuri se, mitä tarvitset apukomponenttien (kuten painikekomponentin) järjestämiseen React-sovelluksessasi. Laatikkokomponentti käyttää ansx propia, jolla on pääsy kaikkiin järjestelmän ominaisuuksiin (kuten korkeus ja leveys), joita tarvitset käyttöliittymäsi komponenttien järjestämiseen.

Laatikkokomponenttiesimerkin käyttäminen

tuonti React from 'react';
tuo linkki osoitteesta '@mui/material/Link';
tuo tekstikenttä osoitteesta @mui/material/TextField;
tuo typografia osoitteesta @mui/material/Typography;
tuo { Button, Box } osoitteesta @mui/material;
function Signin() {
paluu (


sx={{
minun: 8,
näyttö: "flex",
flexDirection: sarake,
alignItems: 'center',
}}>
 Kirjaudu sisään 
label="Sähköpostiosoite"
vaaditaan
id="sähköposti"
name="sähköposti"
margin="normaali"
/>
label="Salasana"
vaaditaan
id="salasana"
name="salasana"
type="salasana"
margin="normaali"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
unohtaa salasana?

variantti="sisältyy"
sx={{mt: 2}}
>
Kirjaudu sisään





);
}
Vie oletusarvoinen kirjautuminen;

Käärimällä laatikkokomponentin apukomponenttien ympärille (ja käyttämällä sx propia) yllä olevassa koodissa, voit luoda tehokkaasti joustavan sarakerakenteen. Yllä oleva koodi tuottaa seuraavan React-kirjautumissivun selaimeesi:

Mikä on MUI Grid -komponentti?

Grid-komponentti on toinen hyödyllinen oppimisen arvoinen MUI-komponentti. Se kuuluu MUI: n asetteluluokkaan ja helpottaa reagointikykyä. Sen avulla kehittäjä voi saavuttaa reagoivan suunnittelun 12 sarakkeen asettelujärjestelmän ansiosta. Tämä asettelujärjestelmä käyttää MUI: n viittä oletuskatkospistettä luodakseen sovelluksia, jotka mukautuvat mihin tahansa näyttökokoon. Näitä keskeytyskohtia ovat:

• xs (erittäin pieni ja alkaa 0px)
• sm (pieni ja alkaa 600 pikselistä)
• md (keskikokoinen ja alkaa 900 pikselistä)
• lg (suuri ja alkaa 1200 pikselistä)
• xl (erittäin suuri ja alkaa 1536 pikselistä)

MUIgrid-komponentti toimii samalla tavalla kuin CSS: n flexbox-ominaisuus, koska siinä on yksisuuntainen ylä-lapsi-järjestelmä, joka perustuu kahden tyyppiseen asetteluun – säilö (emo) ja kohteet (lapsi). MUI-ruudukkokomponentti mahdollistaa kuitenkin sisäkkäisen ruudukon, jossa kohde voi olla myös kontti.

Tutustu muihin ReactJS-sovellusten tyylivaihtoehtoihin

Tämä artikkeli opettaa, kuinka MUI-kirjasto asennetaan ja käytetään React-sovelluksissa. Opit käyttämään joitain peruskomponentteja (kuten typografiaa) ja joitain kehittyneempiä rakenneosia (kuten laatikkokomponenttia).

MUI-kirjasto on helppokäyttöinen, tehokas ja toimii hyvin React-sovellusten kanssa. Mutta se ei tarkoita, että se olisi ainoa React-kehittäjien käytettävissä oleva tyylivaihtoehto. Jos rakennat React-sovellusta, voit vapaasti käyttää MUI-kirjastoa tai mitä tahansa CSS-kehystä sovelluksesi tyylin luomiseen.

Kadeisha Kean (33 artikkelia julkaistu)

Kadeisha Kean on Full-Stack-ohjelmistokehittäjä ja tekninen/teknologiakirjoittaja. Hänellä on selkeä kyky yksinkertaistaa joitain monimutkaisimmista teknologisista käsitteistä; tuottaa materiaalia, jonka jokainen teknologia-aloittelija voi helposti ymmärtää. Hän on intohimoinen kirjoittamiseen, mielenkiintoisten ohjelmistojen kehittämiseen ja maailmalla matkustamiseen (dokumenttien kautta).

Lisää Kadeisha Keanilta