Što je MUI i kako ga možete koristiti u svojim ReactJS projektima?

U rujnu 2021. tvrtka ranije poznata kao Material-UI promijenila je ime u MUI. Ova se promjena dogodila uglavnom zato što mnogi ljudi nisu mogli razlikovati Material-UI od Material Designa (sustav dizajna).

MUI je započeo kao implementacija Material Designa prilagođenog React aplikacijama. Danas se brend širi i želi stvoriti novi sustav dizajna, koji će biti alternativa Material Designu.

Akronim MUI znači Materijal za izgradnju korisničkog sučelja, a u ovom članku naučit ćete kako točno koristiti MUI za izgradnju React korisničkog sučelja.

Kako pristupiti MUI-ju u Reactu?

MUI je dostupan kao npm paket. Stoga, sve što trebate učiniti za pristup je izvršiti sljedeći redak koda unutar vašeg React projekta:

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

Pod pretpostavkom da ste već instaliran React na vašem uređaju, imate potpuni pristup MUI biblioteci i svim njezinim komponentama. MUI ima preko stotinu različitih komponenti koje spadaju u jednu od sljedećih kategorija:

• Ulazi
• Prikaz podataka
• Povratne informacije
• Površine
• Navigacija
• Izgled
• Utils
• Mreža podataka
• Datum vrijeme

Nakon instaliranja MUI-ja kao npm paketa, korištenje biblioteke unutar vašeg projekta jednostavno je kao i uvoz potrebnu komponentu u odgovarajućoj datoteci i umetanje vaših stilskih preferencija na određena mjesta korisničko sučelje.

Ako želite stvoriti stranicu za prijavu za svoju React aplikaciju, to je nekoliko MUI komponenti koje možete koristiti, a koje će uštedjeti vrijeme i pomoći vam da stvorite čist dizajn.

Stvaranje React komponente za prijavu

Da biste stvorili novu komponentu u Reactu, jednostavno idite do Reactove src mape i stvorite novu mapu komponente. Mapa komponente može biti dom za sve vaše komponente, počevši od komponente za prijavu.

Povezano: Što je ReactJS i za što se može koristiti?

Datoteka Signin.js

import React from 'react';
funkcija Prijava() {
povratak (

);
}
izvoz zadane prijave;

Nakon što izradite komponentu za prijavu, vrijeme je da je povežete sa svojom React aplikacijom tako da je uvezete u komponentu aplikacije (koja se nalazi unutar mape src).

Ažurirana datoteka App.js

import React from 'react';
import Signin iz './components/Signin';
funkcija App() {
povratak (






);
}
izvoz zadane aplikacije;

Sada možete početi istraživati ​​MUI komponente koje želite koristiti na svojoj stranici za prijavu.

Što je tipografska komponenta?

Tipografska komponenta pripada kategoriji prikaza podataka MUI-ja i ima trinaest zadanih varijanti. To uključuje:

• h1
• h2
• h3
• h4
• h5
• h6
• podnaslov1
• podnaslov2
• tijelo 1
• tijelo 2
• dugme
• naslov
• precrtati

Varijanta koju odaberete trebala bi ovisiti o tekstu koji želite prikazati. Na primjer, ako želite prikazati naslov, slobodno možete koristiti bilo koju od šest varijanti naslova u korisničkom sučelju. Jednostavno umetnite varijantu i odabranu vrijednost u komponentu tipografije.

Korištenje primjera tipografske komponente

import React from 'react';
import Typography from '@mui/material/Typography';
funkcija Prijava() {
povratak (


 Prijaviti se 



);
}
izvoz zadane prijave;

Važan zaključak iz gornjeg koda je da svaki put kada umetnete novu komponentu u svoje korisničko sučelje, također ćete je morati uvesti na vrh datoteke komponente React. Ažuriranje komponente za prijavu tipografskom komponentom (kao što se vidi u kodu iznad) proizvest će sljedeći izlaz u vašem pregledniku:

Što je komponenta tekstualnog polja?

Komponenta tekstualnog polja pripada kategoriji unosa. Ova komponenta ima dvije jednostavne funkcije; omogućuje korisnicima da unose ili uređuju tekst u korisničkom sučelju. Komponenta polja teksta koristi tri varijante, i to obrubljenu, ispunjenu i standardnu, pri čemu je obrisana varijanta zadana. Stoga, ako želite koristiti zadanu komponentu tekstualnog polja, ne morate uključiti varijantni props. Komponenta polja teksta također koristi nekoliko drugih rekvizita, uključujući oznaku, obavezno, vrstu, id, onemogućeno itd.

Korištenje primjera komponente tekstualnog polja

import React from 'react';
uvoz TextField iz '@mui/material/TextField';
import Typography from '@mui/material/Typography';
funkcija Prijava() {
povratak (


 Prijaviti se 
label="e-mail adresa"
potreban
id="e-pošta"
ime="e-pošta"
/>
label="Lozinka"
potreban
id="lozinka"
ime="lozinka"
type="password"
/>



);
}
izvoz zadane prijave;

Gornji kod će proizvesti sljedeći izlaz u vašem pregledniku:

Kao što ime sugerira, komponenta veze funkcionira na isti način kao i obična CSS veza. Spada u kategoriju navigacije i ima tradicionalne href i target props. Osim toga, ima boju, varijantu i podcrtani rekvizit.

Povezano: Kako koristiti rekvizite u ReactJS-u

Međutim, nema potrebe za korištenjem dodatnih rekvizita osim ako ne želite da vaša veza izgleda jedinstveno. Na primjer, zadana vrijednost podcrtanog propa je "uvijek", a druge dvije vrijednosti koje možete dodijeliti propu su "none" i "lebde".

Stoga trebate uključiti props podcrta u svoju komponentu samo kada ne želite da nema podcrtavanja ili kada želite da ima stanje lebdenja.

Zaboravili ste lozinku?

Umetanje gornjeg koda u postojeću komponentu za prijavu proizvest će sljedeći izlaz u vašem pregledniku:

Što je komponenta gumba?

Komponenta gumba također pripada kategoriji unosa i pridržava se općenite funkcionalnosti gumba i prenosi radnje korisnika vašoj aplikaciji. Ova komponenta koristi jednu od tri varijante (tekstualna, sadržana i obris), a svaka se varijanta može pojaviti u jednom od tri stanja – primarnom, onemogućenom i povezanom.

Zadana varijanta komponente gumba je tekst. Stoga, ako želite sadržani ili ocrtani gumb, morat ćete koristiti varijantni prop da biste to naznačili. Uz varijantni rekvizit, komponenta gumba također ima onclick handler i rekvizit u boji—među ostalima.

Korištenje primjera komponente gumba

 Prijaviti se

Umetanje gornjeg koda u komponentu za prijavu ažurirat će vaše korisničko sučelje kako bi izgledalo na sljedeći način:

Sada imate interaktivni gumb koji lebdi kada miš prijeđe preko njega. Ali sve komponente su horizontalne i ne izgleda sjajno.

Što je komponenta kutije?

Theboxcomponent je upravo ono što vam je potrebno za organiziranje uslužnih komponenti (kao što je komponenta gumba) u vašoj React aplikaciji. Komponenta kutije koristi ansx prop, koji ima pristup svim svojstvima sustava (kao što su visina i širina) koja su vam potrebna za organiziranje komponenti u korisničkom sučelju.

Korištenje primjera komponente Box

import React from 'react';
uvoz veze iz '@mui/material/Link';
uvoz TextField iz '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Button, Box } iz '@mui/material';
funkcija Prijava() {
povratak (


sx={{
moj: 8,
prikaz: 'flex',
flexDirection: 'stupac',
alignItems: 'centar',
}}>
 Prijaviti se 
label="e-mail adresa"
potreban
id="e-pošta"
ime="e-pošta"
margin="normalno"
/>
label="Lozinka"
potreban
id="lozinka"
ime="lozinka"
type="password"
margin="normalno"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
Zaboravili ste lozinku?

varijanta="sadržana"
sx={{mt: 2}}
>
Prijaviti se





);
}
izvoz zadane prijave;

Omotavanjem komponente box-a oko uslužnih komponenti (i korištenjem sx prop-a) u gornjem kodu, učinkovito ćete stvoriti strukturu fleksibilnog stupca. Gornji kod će proizvesti sljedeću stranicu za prijavu na React u vašem pregledniku:

Što je MUI mrežna komponenta?

Mrežna komponenta je još jedna korisna komponenta MUI-ja za učenje. Spada u kategoriju izgleda MUI-ja i olakšava odziv. Omogućuje razvojnom programeru da postigne responzivni dizajn zbog svog sustava izgleda s 12 stupaca. Ovaj sustav rasporeda koristi MUI-jevih pet zadanih prijelomnih točaka za stvaranje aplikacija koje se prilagođavaju bilo kojoj veličini zaslona. Ove prijelomne točke uključuju:

• xs (izuzetno mali i počinje od 0px)
• sm (malo i počinje na 600px)
• doktor medicine (srednji i počinje na 900px)
• lg (veliko i počinje na 1200px)
• xl (izuzetno veliko i počinje od 1536px)

Komponenta MUIgrid radi na isti način kao i CSS flexbox svojstvo po tome što ima jednosmjerni sustav roditelj-dijete koji se temelji na dvije vrste izgleda — spremnik (nadređeni) i stavke (dijete). Međutim, MUI grid komponenta olakšava ugniježđenu mrežu, gdje stavka može biti i spremnik.

Istražite druge opcije stiliziranja za ReactJS aplikacije

Ovaj članak vas uči kako instalirati i koristiti MUI biblioteku u vašim React aplikacijama. Naučite koristiti neke osnovne komponente (kao što je tipografija) i neke od naprednijih strukturnih komponenti (poput komponente kutije).

MUI biblioteka je jednostavna za korištenje, učinkovita i izvrsno radi s React aplikacijama. Ali to ne znači da je to jedina opcija stila dostupna za React programere. Ako gradite React aplikaciju, možete slobodno koristiti MUI biblioteku ili bilo koji CSS okvir za stiliziranje svoje aplikacije.

Kadeisha Kean (Objavljeno 33 članka)

Kadeisha Kean je programerka softvera za cijeli niz i tehnička/tehnološka spisateljica. Ona ima izrazitu sposobnost da pojednostavi neke od najsloženijih tehnoloških koncepata; proizvodnju materijala koji svaki početnik u tehnologiji može lako razumjeti. Strastveno je pisati, razvijati zanimljiv softver i putovati svijetom (kroz dokumentarne filmove).

Više od Kadeishe Kean