Hvad er MUI, og hvordan kan du bruge det i dine ReactJS-projekter?

I september 2021 skiftede virksomheden, tidligere kendt som Material-UI, navn til MUI. Denne ændring skete hovedsageligt, fordi mange mennesker ikke kunne skelne Material-UI fra Material Design (et designsystem).

MUI startede som en implementering af Material Design skræddersyet til React-applikationer. I dag udvider brandet sig og søger at skabe et nyt designsystem, som vil være et alternativ til Material Design.

Akronymet MUI betyder Materiale til at bygge UI'er, og i denne artikel lærer du præcis, hvordan du bruger MUI til at bygge React UI'er.

Hvordan får man adgang til MUI i React?

MUI er tilgængelig som en npm-pakke. Derfor er alt, hvad du skal gøre for at få adgang til det, at udføre følgende kodelinje i dit React-projekt:

npm installer @mui/materiale @emotion/react @emotion/styled

Forudsat at du allerede har installeret React på din enhed, har du fuld adgang til MUI-biblioteket og alle dets komponenter. MUI har over hundrede forskellige komponenter, der falder ind under en af ​​følgende kategorier:

• Indgange
• Data Display
• Feedback
• Overflader
• Navigation
• Layout
• Udils
• Data Grid
• Dato tid

Når du har installeret MUI som en npm-pakke, er det lige så enkelt at bruge biblioteket i dit projekt som at importere påkrævet komponent i den relevante fil og indsætte dine stylingpræferencer på bestemte steder overalt brugergrænsefladen.

Hvis du vil oprette en login-side til din React-applikation, er de flere MUI-komponenter, du kan bruge, som sparer tid og hjælper dig med at skabe et rent design.

Oprettelse af React Sign-in-komponenten

For at oprette en ny komponent i React skal du blot navigere til Reacts src-mappe og oprette en ny komponentmappe. Komponentmappen kan være hjemmet til alle dine komponenter, startende med login-komponenten.

Relaterede: Hvad er ReactJS, og hvad kan det bruges til?

Filen Signin.js

import Reager fra 'reager';
function Login() {
Vend tilbage (

);
}
eksport standard login;

Efter at have oprettet din login-komponent, er det tid til at linke den til din React-applikation ved at importere den til din app-komponent (placeret i src-mappen).

Den opdaterede App.js-fil

import Reager fra 'reager';
importer Signin fra './components/Signin';
funktion App() {
Vend tilbage (






);
}
eksport standard app;

Nu kan du begynde at udforske de MUI-komponenter, du vil bruge på din login-side.

Hvad er typografikomponenten?

Typografikomponenten tilhører MUI's datavisningskategori og har tretten standardvarianter. Disse omfatter:

• h1
• h2
• h3
• h4
• h5
• h6
• undertekst1
• undertekst 2
• krop 1
• krop 2
• knap
• billedtekst
• overline

Den variant, du vælger, bør afhænge af den tekst, du vil vise. For eksempel, hvis du vil vise en overskrift, kan du frit bruge en af ​​de seks overskriftsvarianter i din brugergrænseflade. Du skal blot indsætte variantens rekvisit og den valgte værdi i typografikomponenten.

Brug af eksempelet på typografikomponenten

import Reager fra 'reager';
importer typografi fra '@mui/material/Typography';
function Login() {
Vend tilbage (


 Log ind 



);
}
eksport standard login;

En vigtig takeaway fra koden ovenfor er, at hver gang du indsætter en ny komponent i din brugergrænseflade, skal du også importere den øverst i din React-komponentfil. Opdatering af din login-komponent med typografi-komponenten (som vist i koden ovenfor) vil producere følgende output i din browser:

Hvad er tekstfeltkomponenten?

Tekstfeltkomponenten hører til inputkategorien. Denne komponent har to simple funktioner; det giver brugerne mulighed for at indtaste eller redigere teksten i en brugergrænseflade. Tekstfeltkomponenten bruger tre varianter, nemlig skitseret, udfyldt og standard, hvor den skitserede variant er standardvarianten. Derfor, hvis du vil bruge standardtekstfeltkomponenten, behøver du ikke inkludere varianten rekvisit. Tekstfeltkomponenten bruger også flere andre rekvisitter, herunder etiket, påkrævet, type, id, deaktiveret osv.

Brug af tekstfeltkomponenteksemplet

import Reager fra 'reager';
importer TextField fra '@mui/material/TextField';
importer typografi fra '@mui/material/Typography';
function Login() {
Vend tilbage (


 Log ind 
label="E-mail-adresse"
påkrævet
id="e-mail"
name="e-mail"
/>
label="Adgangskode"
påkrævet
id="adgangskode"
name="adgangskode"
type="adgangskode"
/>



);
}
eksport standard login;

Ovenstående kode vil producere følgende output i din browser:

Som navnet antyder, fungerer linkkomponenten på samme måde som et almindeligt CSS-link. Det falder ind under navigationskategorien og har de traditionelle href- og målrekvisitter. Derudover har den en farve, en variant og en understregningsprop.

Relaterede: Sådan bruges rekvisitter i ReactJS

Der er dog ingen grund til at bruge yderligere rekvisitter, medmindre du ønsker, at dit link skal se unikt ud. For eksempel er standardværdien for understregningsproppet "altid", og de to andre værdier, du kan tildele til rekvisiten, er "ingen" og "hover".

Derfor behøver du kun at inkludere understregningsstøtten i din komponent, når du ikke ønsker nogen understregning, eller når du ønsker, at den skal have en svævetilstand.

glemme adgangskode?

Hvis du indsætter koden ovenfor i din eksisterende login-komponent, produceres følgende output i din browser:

Hvad er knapkomponenten?

Knapkomponenten hører også til inputkategorien og overholder den generelle knapfunktionalitet, den kommunikerer en brugers handlinger til din applikation. Denne komponent bruger en af ​​tre varianter (tekst, indeholdt og kontur), og hver variant kan vises i en af ​​tre tilstande - primær, deaktiveret og linket.

En knapkomponent standardvariant er tekst. Derfor, hvis du vil have en indeholdt eller skitseret knap, skal du bruge varianten rekvisit til at indikere det. Ud over varianten rekvisit, har knap-komponenten også en onclick handler og en farve prop – blandt andet.

Brug af knapkomponenteksempel

 Log ind

Hvis du indsætter koden ovenfor i din login-komponent, opdateres din brugergrænseflade til at se sådan ud:

Nu har du en interaktiv knap, der svæver, når musen kører over den. Men alle komponenterne er vandrette, og det ser ikke godt ud.

Hvad er bokskomponenten?

Theboxcomponent er præcis, hvad du skal bruge for at organisere hjælpekomponenter (såsom knapkomponenten) i din React-app. Bokskomponenten bruger ansx prop, som har adgang til alle systemegenskaber (såsom højde og bredde), som du skal bruge for at organisere komponenterne i din brugergrænseflade.

Brug af Box Component Eksempel

import Reager fra 'reager';
importer Link fra '@mui/material/Link';
importer TextField fra '@mui/material/TextField';
importer typografi fra '@mui/material/Typography';
importer { Button, Box } fra '@mui/material';
function Login() {
Vend tilbage (


sx={{
min: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}>
 Log ind 
label="E-mail-adresse"
påkrævet
id="e-mail"
name="e-mail"
margin="normal"
/>
label="Adgangskode"
påkrævet
id="adgangskode"
name="adgangskode"
type="adgangskode"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
glemme adgangskode?

variant="indeholdt"
sx={{mt: 2}}
>
Log ind





);
}
eksport standard login;

Ved at pakke bokskomponenten rundt om hjælpekomponenterne (og bruge sx prop) i koden ovenfor, vil du effektivt skabe en fleksibel kolonnestruktur. Ovenstående kode vil producere følgende React-logonside i din browser:

Hvad er MUI Grid Component?

Gitterkomponenten er en anden nyttig MUI-komponent at lære. Det falder ind under MUIs layoutkategori og letter reaktionsevnen. Det giver en udvikler mulighed for at opnå responsivt design på grund af dets 12-søjle layoutsystem. Dette layoutsystem bruger MUI's fem standardbrudpunkter til at skabe applikationer, der tilpasser sig enhver skærmstørrelse. Disse brudpunkter inkluderer:

• xs (ekstra lille og starter ved 0px)
• sm (lille og starter ved 600px)
• md (medium og starter ved 900px)
• lg (stor og starter ved 1200px)
• xl (ekstra stor og starter ved 1536px)

MUIgridcomponenten fungerer på samme måde som CSS flexbox-egenskaben, idet den har et ensrettet overordnet-underordnet system baseret på to typer layouts-container (overordnet) og elementer (underordnet). MUI-gitterkomponenten letter dog et indlejret gitter, hvor et element også kan være en container.

Udforsk andre stylingmuligheder for ReactJS-applikationer

Denne artikel lærer dig, hvordan du installerer og bruger MUI-biblioteket i dine React-applikationer. Du lærer at bruge nogle grundlæggende komponenter (såsom typografi) og nogle af de mere avancerede strukturelle komponenter (som bokskomponenten).

MUI-biblioteket er nemt at bruge, effektivt og fungerer godt med React-apps. Men det betyder ikke, at det er den eneste stylingmulighed, der er tilgængelig for React-udviklere. Hvis du bygger en React-applikation, kan du frit bruge MUI-biblioteket eller en hvilken som helst CSS-ramme til at style din app.

Kadeisha Kean (33 artikler udgivet)

Kadeisha Kean er fuld stack softwareudvikler og teknisk/teknologiskribent. Hun har den udprægede evne til at forenkle nogle af de mest komplekse teknologiske begreber; producere materiale, der let kan forstås af enhver nybegynder teknologi. Hun brænder for at skrive, udvikle interessant software og rejse verden rundt (gennem dokumentarer).

Mere fra Kadeisha Kean