Čo je MUI a ako ho môžete použiť vo svojich projektoch ReactJS?

V septembri 2021 spoločnosť predtým známa ako Material-UI zmenila svoj názov na MUI. Táto zmena nastala hlavne preto, že veľa ľudí nedokázalo rozlíšiť Material-UI od Material Design (dizajnový systém).

MUI začalo ako implementácia Material Design prispôsobená pre aplikácie React. Dnes značka expanduje a snaží sa vytvoriť nový dizajnový systém, ktorý bude alternatívou k Material Designu.

Skratka MUI znamená Material to build UIs a v tomto článku sa presne dozviete, ako používať MUI na vytváranie používateľských rozhraní React.

Ako získať prístup k MUI v React?

MUI je k dispozícii ako balík npm. Preto všetko, čo musíte urobiť, aby ste sa k nemu dostali, je vykonať nasledujúci riadok kódu vo vašom projekte React:

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

Za predpokladu, že ste to už urobili nainštalovaný React na vašom zariadení, máte úplný prístup ku knižnici MUI a všetkým jej komponentom. MUI má viac ako sto rôznych komponentov, ktoré spadajú do jednej z nasledujúcich kategórií:

• Vstupy
• Zobrazenie údajov
• Spätná väzba
• Povrchy
• Navigácia
• Rozloženie
• Utils
• Dátová mriežka
• Dátum Čas

Po nainštalovaní MUI ako balíka npm je používanie knižnice v projekte rovnako jednoduché ako importovanie požadovaný komponent v príslušnom súbore a vloženie vašich preferencií štýlu na konkrétne miesta UI.

Ak chcete vytvoriť prihlasovaciu stránku pre svoju aplikáciu React, môžete použiť niekoľko komponentov MUI, ktoré ušetria čas a pomôžu vám vytvoriť čistý dizajn.

Vytvorenie komponentu React Sign-in

Ak chcete vytvoriť nový komponent v Reacte, jednoducho prejdite do priečinka src Reactu a vytvorte nový priečinok komponentu. Priečinok komponentov môže byť domovom všetkých vašich komponentov, počnúc prihlasovacím komponentom.

Súvisiace: Čo je ReactJS a na čo sa dá použiť?

Súbor Signin.js

import Reagovať z 'reagovať';
function Signin() {
vrátiť (

);
}
exportovať predvolené Prihlásenie;

Po vytvorení prihlasovacieho komponentu je čas ho prepojiť s vašou aplikáciou React importovaním do komponentu aplikácie (umiestneného v priečinku src).

Aktualizovaný súbor App.js

import Reagovať z 'reagovať';
importovať Prihlásenie z './components/Signin';
function App() {
vrátiť (






);
}
exportovať predvolenú aplikáciu;

Teraz môžete začať skúmať komponenty MUI, ktoré chcete použiť na svojej prihlasovacej stránke.

Čo je to typografická zložka?

Komponent typografie patrí do kategórie zobrazenia údajov MUI a má trinásť predvolených variantov. Tie obsahujú:

• h1
• h2
• h3
• h4
• h5
• h6
• podnadpis1
• podnadpis2
• telo1
• telo2
• tlačidlo
• titulok
• overline

Variant, ktorý vyberiete, by mal závisieť od textu, ktorý chcete zobraziť. Ak chcete napríklad zobraziť nadpis, môžete vo svojom používateľskom rozhraní použiť ktorýkoľvek zo šiestich variantov nadpisu. Jednoducho vložte variantnú rekvizitu a zvolenú hodnotu do typografického komponentu.

Použitie príkladu komponentu typografie

import Reagovať z 'reagovať';
import typografie z '@mui/material/Typography';
function Signin() {
vrátiť (


 Prihlásiť sa 



);
}
exportovať predvolené Prihlásenie;

Dôležitým poznatkom z vyššie uvedeného kódu je, že zakaždým, keď do používateľského rozhrania vložíte nový komponent, budete ho musieť importovať aj do hornej časti súboru komponentu React. Aktualizácia vášho prihlasovacieho komponentu pomocou komponentu typografie (ako je vidieť v kóde vyššie) vytvorí vo vašom prehliadači nasledujúci výstup:

Čo je komponent textového poľa?

Komponent textového poľa patrí do kategórie vstupu. Tento komponent má dve jednoduché funkcie; umožňuje používateľom zadávať alebo upravovať text v používateľskom rozhraní. Komponent textové pole používa tri varianty, a to obrysový, vyplnený a štandardný, pričom načrtnutý variant je predvolený. Preto, ak chcete použiť predvolený komponent textového poľa, nemusíte zahrnúť variantnú podperu. Komponent textového poľa tiež používa niekoľko ďalších rekvizít, vrátane štítka, povinného, ​​typu, id, zakázaných atď.

Príklad komponentu textového poľa

import Reagovať z 'reagovať';
import TextField z '@mui/material/TextField';
import typografie z '@mui/material/Typography';
function Signin() {
vrátiť (


 Prihlásiť sa 
label="E-mailová adresa"
požadovaný
id="e-mail"
name="email"
/>
label="Heslo"
požadovaný
id="heslo"
name="heslo"
type="heslo"
/>



);
}
exportovať predvolené Prihlásenie;

Vyššie uvedený kód vytvorí vo vašom prehliadači nasledujúci výstup:

Ako už názov napovedá, komponent odkazu funguje rovnakým spôsobom ako obyčajný CSS odkaz. Spadá do kategórie navigácie a má tradičné href a cieľové rekvizity. Okrem toho má farbu, variant a podčiarknutú rekvizitu.

Súvisiace: Ako používať rekvizity v ReactJS

Nie je však potrebné používať žiadne ďalšie rekvizity, pokiaľ nechcete, aby váš odkaz vyzeral jedinečne. Napríklad predvolená hodnota podčiarknutej rekvizity je „vždy“ a ďalšie dve hodnoty, ktoré môžete rekvizite priradiť, sú „žiadna“ a „vznášať sa“.

Podperu podčiarknutia preto musíte do svojho komponentu zahrnúť iba vtedy, keď nechcete žiadne podčiarknutie alebo keď chcete, aby bol v stave vznášania.

zabudnuté heslo?

Vložením vyššie uvedeného kódu do existujúceho prihlasovacieho komponentu sa vo vašom prehliadači vytvorí nasledujúci výstup:

Čo je to tlačidlový komponent?

Komponent tlačidla tiež patrí do kategórie vstupu a dodržiava všeobecnú funkcionalitu tlačidiel a oznamuje akcie používateľa vašej aplikácii. Tento komponent používa jeden z troch variantov (textový, obsiahnutý a obrys) a každý variant sa môže objaviť v jednom z troch stavov – primárny, zakázaný a prepojený.

Predvoleným variantom komponentu tlačidla je text. Preto, ak chcete tlačidlo s obsiahnutým alebo obrysovým obrysom, musíte na to použiť variantnú podperu. Okrem variantnej rekvizity má komponent tlačidla aj onclick handler a farebnú rekvizitu – okrem iného.

Použitie príkladu komponentu tlačidla

 Prihlásiť sa

Vložením vyššie uvedeného kódu do vášho prihlasovacieho komponentu sa vaše používateľské rozhranie aktualizuje tak, aby vyzeralo takto:

Teraz máte interaktívne tlačidlo, ktoré sa vznáša, keď naň prejdete myšou. Ale všetky komponenty sú horizontálne a nevyzerá to skvele.

Čo je komponent krabice?

Theboxcomponent je presne to, čo potrebujete na usporiadanie pomocných komponentov (ako je komponent tlačidla) vo vašej aplikácii React. Komponent box používa prop ansx, ktorý má prístup ku všetkým vlastnostiam systému (ako je výška a šírka), ktoré potrebujete na usporiadanie komponentov vo svojom používateľskom rozhraní.

Príklad použitia komponentu škatule

import Reagovať z 'reagovať';
importovať odkaz z '@mui/material/Link';
import TextField z '@mui/material/TextField';
import typografie z '@mui/material/Typography';
import { Button, Box } z '@mui/material';
function Signin() {
vrátiť (


sx={{
moje: 8,
displej: 'flex',
flexDirection: 'stĺpec',
alignItems: 'center',
}}>
 Prihlásiť sa 
label="E-mailová adresa"
požadovaný
id="e-mail"
name="email"
margin="normal"
/>
label="Heslo"
požadovaný
id="heslo"
name="heslo"
type="heslo"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
zabudnuté heslo?

variant="contained"
sx={{mt: 2}}
>
Prihlásiť sa





);
}
exportovať predvolené Prihlásenie;

Obalením komponentu boxu okolo pomocných komponentov (a použitím rekvizity sx) v kóde vyššie efektívne vytvoríte štruktúru flexibilného stĺpca. Vyššie uvedený kód vytvorí vo vašom prehliadači nasledujúcu prihlasovaciu stránku React:

Čo je komponent MUI Grid?

Komponent mriežky je ďalším užitočným komponentom MUI, ktorý sa treba naučiť. Spadá do kategórie rozloženia MUI a uľahčuje odozvu. Umožňuje vývojárom dosiahnuť citlivý dizajn vďaka 12-stĺpcovému systému rozloženia. Tento systém rozloženia využíva päť predvolených bodov prerušenia MUI na vytváranie aplikácií, ktoré sa prispôsobia akejkoľvek veľkosti obrazovky. Tieto prerušovacie body zahŕňajú:

• xs (extra malý a začína na 0px)
• sm (malý a začína na 600px)
• md (stredné a začína na 900 pixeloch)
• lg (veľký a začína na 1200px)
• xl (extra veľké a začína na 1536 pixeloch)

Komponent MUIgrid funguje rovnakým spôsobom ako vlastnosť CSS flexbox v tom, že má jednosmerný systém rodič-dieťa založený na dvoch typoch rozloženia – kontajner (nadradený) a položky (dieťa). Komponent mriežky MUI však umožňuje vnorenú mriežku, kde položka môže byť aj kontajner.

Preskúmajte ďalšie možnosti štýlu pre aplikácie ReactJS

Tento článok vás naučí, ako nainštalovať a používať knižnicu MUI vo vašich aplikáciách React. Naučíte sa, ako používať niektoré základné komponenty (napríklad typografiu) a niektoré pokročilejšie štrukturálne komponenty (ako komponent krabice).

Knižnica MUI sa ľahko používa, je efektívna a funguje skvele s aplikáciami React. To však neznamená, že je to jediná možnosť štýlu dostupná pre vývojárov React. Ak vytvárate aplikáciu React, môžete na úpravu svojej aplikácie použiť knižnicu MUI alebo akýkoľvek rámec CSS.

Kadeisha Kean (33 publikovaných článkov)

Kadeisha Kean je vývojár úplného softvéru a technicko-technologický spisovateľ. Má výraznú schopnosť zjednodušiť niektoré z najzložitejších technologických konceptov; produkovať materiál, ktorý je ľahko zrozumiteľný pre každého technologického nováčika. Je nadšená písaním, vývojom zaujímavého softvéru a cestovaním po svete (prostredníctvom dokumentárnych filmov).

Viac od Kadeishy Keanovej