Kas yra MUI ir kaip galite ją naudoti savo „ReactJS“ projektuose?

2021 m. rugsėjį bendrovė, anksčiau vadinta Material-UI, pakeitė pavadinimą į MUI. Šis pakeitimas įvyko daugiausia dėl to, kad daugelis žmonių negalėjo atskirti Material-UI nuo Material Design (projektavimo sistemos).

MUI prasidėjo kaip „React“ programoms pritaikytos medžiagos dizaino diegimas. Šiandien prekės ženklas plečiasi ir siekia sukurti naują dizaino sistemą, kuri taps alternatyva Material Design.

Akronimas MUI reiškia medžiagą vartotojo sąsajoms kurti, o šiame straipsnyje tiksliai sužinosite, kaip naudoti MUI kuriant React vartotojo sąsają.

Kaip pasiekti MUI naudojant „React“?

MUI galima įsigyti kaip npm paketą. Todėl viskas, ką jums reikia padaryti, kad jį pasiektumėte, yra vykdyti šią kodo eilutę savo „React“ projekte:

npm įdiegti @mui/material @emotion/react @emotion/styled

Darant prielaidą, kad jau turite įdiegtas React jūsų įrenginyje, turite visišką prieigą prie MUI bibliotekos ir visų jos komponentų. MUI yra daugiau nei šimtas skirtingų komponentų, kurie patenka į vieną iš šių kategorijų:

• Įėjimai
• Duomenų rodymas
• Atsiliepimas
• Paviršiai
• Navigacija
• Išdėstymas
• Utils
• Duomenų tinklelis
• Data/Laikas

Įdiegę MUI kaip npm paketą, projekto biblioteką naudoti taip paprasta, kaip importuoti reikiamą komponentą atitinkamame faile ir įterpti savo stiliaus nuostatas konkrečiose vietose vartotojo sąsaja.

Jei norite sukurti savo „React“ programos prisijungimo puslapį, tai yra keli MUI komponentai, kuriuos galite naudoti. Tai padės sutaupyti laiko ir sukurti švarų dizainą.

„React“ prisijungimo komponento kūrimas

Norėdami sukurti naują komponentą React, tiesiog eikite į React src aplanką ir sukurkite naują komponento aplanką. Komponentų aplankas gali būti visų jūsų komponentų, pradedant nuo prisijungimo komponento, vieta.

Susijęs: Kas yra ReactJS ir kam jis gali būti naudojamas?

Signin.js failas

importuoti React iš 'react';
function Signin() {
grįžti (

);
}
eksportuoti numatytąjį prisijungimą;

Sukūrus prisijungimo komponentą, laikas susieti jį su programa „React“, importuojant jį į programos komponentą (esantį src aplanke).

Atnaujintas App.js failas

importuoti React iš 'react';
importuoti prisijungimą iš „./components/Signin“;
function App() {
grįžti (






);
}
eksportuoti numatytąją programą;

Dabar galite pradėti tyrinėti MUI komponentus, kuriuos norite naudoti prisijungimo puslapyje.

Kas yra tipografijos komponentas?

Tipografijos komponentas priklauso MUI duomenų rodymo kategorijai ir turi trylika numatytųjų variantų. Jie apima:

• h1
• h2
• h3
• h4
• h5
• h6
• 1 paantraštė
• 2 paantraštė
• korpusas1
• korpusas2
• mygtuką
• antraštė
• perbraukimas

Pasirinktas variantas turėtų priklausyti nuo teksto, kurį norite rodyti. Pavyzdžiui, jei norite rodyti antraštę, savo vartotojo sąsajoje galite laisvai naudoti bet kurį iš šešių antraščių variantų. Tiesiog įterpkite varianto rekvizitus ir pasirinktą reikšmę į tipografijos komponentą.

Tipografijos komponento pavyzdžio naudojimas

importuoti React iš 'react';
importuoti tipografiją iš '@mui/material/Typography';
function Signin() {
grįžti (


 Prisijungti 



);
}
eksportuoti numatytąjį prisijungimą;

Svarbus pirmiau pateikto kodo ištrauka yra tai, kad kiekvieną kartą, kai į vartotojo sąsają įdedate naują komponentą, taip pat turėsite jį importuoti React komponento failo viršuje. Atnaujinus prisijungimo komponentą tipografijos komponentu (kaip matyti anksčiau pateiktame kode), jūsų naršyklėje bus pateikta tokia išvestis:

Kas yra teksto lauko komponentas?

Teksto lauko komponentas priklauso įvesties kategorijai. Šis komponentas turi dvi paprastas funkcijas; tai leidžia vartotojams įvesti arba redaguoti tekstą vartotojo sąsajoje. Teksto lauko komponente naudojami trys variantai, būtent kontūrinis, užpildytas ir standartinis, o nurodytasis variantas yra numatytasis. Todėl, jei norite naudoti numatytąjį teksto lauko komponentą, jums nereikia įtraukti varianto pasiūlymo. Teksto lauko komponentas taip pat naudoja keletą kitų rekvizitų, įskaitant etiketę, privalomą, tipą, ID, išjungtą ir kt.

Naudojant teksto lauko komponento pavyzdį

importuoti React iš 'react';
importuoti teksto lauką iš '@mui/material/TextField';
importuoti tipografiją iš '@mui/material/Typography';
function Signin() {
grįžti (


 Prisijungti 
label="El. pašto adresas"
reikalaujama
id="el.paštas"
name="el.paštas"
/>
etiketė="slaptažodis"
reikalaujama
id="slaptažodis"
vardas = slaptažodis
type="slaptažodis"
/>



);
}
eksportuoti numatytąjį prisijungimą;

Aukščiau pateiktas kodas jūsų naršyklėje pateiks tokią išvestį:

Kaip rodo pavadinimas, nuorodos komponentas veikia taip pat, kaip paprasta CSS nuoroda. Jis patenka į navigacijos kategoriją ir turi tradicinius href ir tikslinius rekvizitus. Be to, jis turi spalvą, variantą ir pabraukimo atramą.

Susijęs: Kaip naudoti rekvizitus „ReactJS“.

Tačiau nereikia naudoti jokių papildomų rekvizitų, nebent norite, kad nuoroda atrodytų unikali. Pavyzdžiui, numatytoji pabraukimo atramos reikšmė yra „visada“, o kitos dvi vertės, kurias galite priskirti atramai, yra „none“ ir „hover“.

Todėl pabraukimo rekvizitą į savo komponentą turite įtraukti tik tada, kai nenorite pabraukti arba kai norite, kad jis turėtų užvedimo būseną.

pamiršti slaptažodį?

Įdėjus anksčiau pateiktą kodą į esamą prisijungimo komponentą, jūsų naršyklėje bus pateikta tokia išvestis:

Kas yra mygtuko komponentas?

Mygtuko komponentas taip pat priklauso įvesties kategorijai ir atitinka bendrąsias mygtuko funkcijas, todėl naudotojo veiksmus perduoda jūsų programai. Šiame komponente naudojamas vienas iš trijų variantų (tekstas, esantis ir kontūras), ir kiekvienas variantas gali būti vienoje iš trijų būsenų – pirminis, išjungtas ir susietas.

Numatytasis mygtuko komponento variantas yra tekstas. Todėl, jei norite, kad mygtukas būtų talpyklos arba kontūro, turėsite tai nurodyti naudodami variantą. Be varianto atramos, mygtuko komponentas, be kita ko, taip pat turi onclick tvarkyklę ir spalvų atramą.

Mygtuko komponento pavyzdys

 Prisijungti

Įdėjus anksčiau pateiktą kodą į prisijungimo komponentą, vartotojo sąsaja bus atnaujinta, kad atrodytų taip:

Dabar turite interaktyvų mygtuką, kuris užves pelės žymeklį ant jo. Tačiau visi komponentai yra horizontalūs ir neatrodo puikiai.

Kas yra dėžutės komponentas?

„Theboxcomponent“ yra būtent tai, ko jums reikia norint organizuoti paslaugų komponentus (pvz., mygtuko komponentą) „React“ programoje. Dėžutės komponentas naudoja ansx prop, kuris turi prieigą prie visų sistemos ypatybių (tokių kaip aukštis ir plotis), kurių jums reikia norint tvarkyti vartotojo sąsajos komponentus.

Dėžutės komponento pavyzdžio naudojimas

importuoti React iš 'react';
importuoti nuorodą iš '@mui/material/Link';
importuoti teksto lauką iš '@mui/material/TextField';
importuoti tipografiją iš '@mui/material/Typography';
importuoti { Button, Box } iš '@mui/material';
function Signin() {
grįžti (


sx={{
mano: 8,
ekranas: „flex“,
flexDirection: „stulpelis“,
alignItems: "centras",
}}>
 Prisijungti 
label="El. pašto adresas"
reikalaujama
id="el.paštas"
name="el.paštas"
paraštė = "normalus"
/>
etiketė="slaptažodis"
reikalaujama
id="slaptažodis"
vardas = slaptažodis
type="slaptažodis"
paraštė = "normalus"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
pamiršti slaptažodį?

variantas = "sudėtyje"
sx={{mt: 2}}
>
Prisijungti





);
}
eksportuoti numatytąjį prisijungimą;

Apvynioję dėžutės komponentą aplink naudingumo komponentus (ir naudodami sx prop) aukščiau esančiame kode, efektyviai sukursite lanksčią stulpelio struktūrą. Aukščiau pateiktas kodas jūsų naršyklėje sukurs šį „React“ prisijungimo puslapį:

Kas yra MUI tinklelio komponentas?

Tinklelio komponentas yra dar vienas naudingas MUI komponentas, kurį reikia išmokti. Jis patenka į MUI išdėstymo kategoriją ir palengvina reagavimą. Tai leidžia kūrėjui pasiekti jautrų dizainą dėl 12 stulpelių išdėstymo sistemos. Ši išdėstymo sistema naudoja penkis numatytuosius MUI lūžio taškus, kad sukurtų programas, prisitaikančias prie bet kokio ekrano dydžio. Šie lūžio taškai apima:

• xs (ypač mažas ir prasideda nuo 0 pikselių)
• sm (mažas ir prasideda nuo 600 pikselių)
• md (vidutinis ir prasideda 900 piks.)
• lg (didelis ir prasideda 1200 piks.)
• xl (ypač didelis ir prasideda nuo 1536 pikselių)

Komponentas MUIgrid veikia taip pat, kaip CSS flexbox ypatybė, nes jame yra vienakryptė pirminė ir antrinė sistema, pagrįsta dviejų tipų išdėstymais – konteineris (pirminis) ir elementai (antrasis). Tačiau MUI tinklelio komponentas palengvina įdėtą tinklelį, kur elementas taip pat gali būti konteineris.

Ištirkite kitas „ReactJS“ programų stiliaus parinktis

Šiame straipsnyje mokoma, kaip įdiegti ir naudoti MUI biblioteką „React“ programose. Išmoksite naudoti kai kuriuos pagrindinius komponentus (pvz., tipografiją) ir kai kuriuos sudėtingesnius struktūrinius komponentus (pvz., dėžutės komponentą).

MUI biblioteka yra paprasta naudoti, efektyvi ir puikiai veikia su „React“ programomis. Tačiau tai nereiškia, kad tai yra vienintelė „React“ kūrėjams prieinama stiliaus parinktis. Jei kuriate „React“ programą, galite laisvai naudoti MUI biblioteką arba bet kurią CSS sistemą, kad sukurtumėte programos stilių.

Kadeisha Kean (Paskelbta 33 straipsniai)

Kadeisha Kean yra visos programinės įrangos kūrėja ir techninių / technologijų rašytoja. Ji turi išskirtinį gebėjimą supaprastinti kai kurias sudėtingiausias technologines koncepcijas; gaminant medžiagą, kurią gali lengvai suprasti bet kuris technologijų naujokas. Ji aistringai rašo, kuria įdomią programinę įrangą ir keliauja po pasaulį (per dokumentinius filmus).

Daugiau iš Kadeisha Kean