Hva er MUI og hvordan kan du bruke det i dine ReactJS-prosjekter?

I september 2021 endret selskapet tidligere kjent som Material-UI navn til MUI. Denne endringen skjedde hovedsakelig fordi mange mennesker ikke kunne skille Material-UI fra Material Design (et designsystem).

MUI startet som en implementering av Material Design skreddersydd for React-applikasjoner. I dag utvider merket seg og ønsker å lage et nytt designsystem, som vil være et alternativ til Material Design.

Akronymet MUI betyr Material for å bygge brukergrensesnitt, og i denne artikkelen lærer du nøyaktig hvordan du bruker MUI til å bygge React-grensesnitt.

Hvordan få tilgang til MUI i React?

MUI er tilgjengelig som en npm-pakke. Derfor er alt du trenger å gjøre for å få tilgang til det å utføre følgende kodelinje i React-prosjektet ditt:

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

Forutsatt at du allerede har installert React på enheten din, har du full tilgang til MUI-biblioteket og alle dets komponenter. MUI har over hundre forskjellige komponenter som faller inn i en av følgende kategorier:

• Innganger
• Datavisning
• Tilbakemelding
• Overflater
• Navigasjon
• Oppsett
• Utils
• Datarutenett
• Dato tid

Etter å ha installert MUI som en npm-pakke, er det like enkelt å bruke biblioteket i prosjektet som å importere nødvendig komponent i den aktuelle filen og sett inn stylingpreferansene dine på spesifikke steder brukergrensesnittet.

Hvis du vil lage en påloggingsside for React-applikasjonen din, er de flere MUI-komponenter du kan bruke som sparer tid og hjelper deg med å lage et rent design.

Opprette React-påloggingskomponenten

For å lage en ny komponent i React, naviger ganske enkelt til Reacts src-mappe og opprette en ny komponentmappe. Komponentmappen kan være hjemmet til alle komponentene dine, og starter med påloggingskomponenten.

I slekt: Hva er ReactJS, og hva kan det brukes til?

Filen Signin.js

import Reager fra 'reager';
function Signin() {
komme tilbake (

);
}
eksport standard pålogging;

Etter å ha opprettet påloggingskomponenten din, er det på tide å koble den til React-applikasjonen din ved å importere den til appkomponenten din (plassert i src-mappen).

Den oppdaterte App.js-filen

import Reager fra 'reager';
importer pålogging fra './components/Signin';
funksjon App() {
komme tilbake (






);
}
eksport standard app;

Nå kan du begynne å utforske MUI-komponentene du vil bruke på påloggingssiden.

Hva er typografikomponenten?

Typografikomponenten tilhører MUIs datavisningskategori og har tretten standardvarianter. Disse inkluderer:

• h1
• h2
• h3
• h4
• h5
• h6
• undertekst1
• undertekst2
• kropp 1
• kropp 2
• knapp
• bildetekst
• overlinje

Varianten du velger bør avhenge av teksten du vil vise. Hvis du for eksempel vil vise en overskrift, står du fritt til å bruke hvilken som helst av de seks overskriftsvariantene i brukergrensesnittet. Bare sett inn varianten rekvisita og den valgte verdien i typografi-komponenten.

Bruke eksempelet på typografikomponenten

import Reager fra 'reager';
importer typografi fra '@mui/material/Typography';
function Signin() {
komme tilbake (


 Logg inn 



);
}
eksport standard pålogging;

En viktig del av koden ovenfor er at hver gang du setter inn en ny komponent i brukergrensesnittet ditt, må du også importere den øverst i React-komponentfilen. Oppdatering av påloggingskomponenten med typografikomponenten (som vist i koden ovenfor) vil produsere følgende utdata i nettleseren din:

Hva er tekstfeltkomponenten?

Tekstfeltkomponenten tilhører inndatakategorien. Denne komponenten har to enkle funksjoner; den lar brukere legge inn eller redigere teksten i et brukergrensesnitt. Tekstfeltkomponenten bruker tre varianter, nemlig skissert, fylt og standard, med den skisserte varianten som standard. Derfor, hvis du vil bruke standard tekstfeltkomponent, trenger du ikke å inkludere varianten prop. Tekstfeltkomponenten bruker også flere andre rekvisitter, inkludert etikett, nødvendig, type, id, deaktivert, etc.

Bruke eksempelet på tekstfeltkomponenten

import Reager fra 'reager';
importer TextField fra '@mui/material/TextField';
importer typografi fra '@mui/material/Typography';
function Signin() {
komme tilbake (


 Logg inn 
label="E-postadresse"
nødvendig
id="e-post"
name="e-post"
/>
label="Passord"
nødvendig
id="passord"
name="passord"
type="passord"
/>



);
}
eksport standard pålogging;

Koden ovenfor vil produsere følgende utdata i nettleseren din:

Som navnet antyder, fungerer lenkekomponenten på samme måte som en vanlig CSS-lenke. Den faller inn i navigasjonskategorien og har de tradisjonelle href- og målrekvisittene. I tillegg har den en farge, en variant og en understreking.

I slekt: Hvordan bruke rekvisitter i ReactJS

Det er imidlertid ikke nødvendig å bruke ekstra rekvisitter med mindre du vil at linken din skal se unik ut. For eksempel er standardverdien for understrekingsrekvisiten "alltid" og de to andre verdiene du kan tilordne til rekvisitten er "ingen" og "sveve".

Derfor trenger du bare å inkludere understrekingsrekvisitten i komponenten din når du ikke vil ha understreking eller når du vil at den skal ha en svevetilstand.

glem passord?

Hvis du setter inn koden ovenfor i den eksisterende påloggingskomponenten din, får du følgende utdata i nettleseren din:

Hva er knappkomponenten?

Knappekomponenten tilhører også inngangskategorien og overholder generell knappefunksjonalitet, den kommuniserer en brukers handlinger til applikasjonen din. Denne komponenten bruker en av tre varianter (tekst, inneholdt og kontur), og hver variant kan vises i en av tre tilstander – primær, deaktivert og koblet.

En standardvariant for knappekomponent er tekst. Derfor, hvis du vil ha en inneholdt eller skissert knapp, må du bruke varianten rekvisitt for å indikere det. I tillegg til variantrekvisitten har knappekomponenten også en onclick-behandler og en fargerekvisitt – blant annet.

Bruke eksempelet på knappkomponenten

 Logg inn

Hvis du setter inn koden ovenfor i påloggingskomponenten, oppdateres brukergrensesnittet slik at det ser slik ut:

Nå har du en interaktiv knapp som svever når musen kjører over den. Men alle komponentene er horisontale, og det ser ikke bra ut.

Hva er bokskomponenten?

Theboxcomponent er akkurat det du trenger for å organisere verktøykomponenter (som knappekomponenten) i React-appen din. Bokskomponenten bruker ansx prop, som har tilgang til alle systemegenskaper (som høyde og bredde) som du trenger for å organisere komponentene i brukergrensesnittet.

Bruke eksempelet på bokskomponenten

import Reager fra 'reager';
importer lenke fra '@mui/material/Link';
importer TextField fra '@mui/material/TextField';
importer typografi fra '@mui/material/Typography';
importer { Button, Box } fra '@mui/material';
function Signin() {
komme tilbake (


sx={{
min: 8,
display: 'flex',
flexDirection: 'kolonne',
alignItems: 'center',
}}>
 Logg inn 
label="E-postadresse"
nødvendig
id="e-post"
name="e-post"
margin="normal"
/>
label="Passord"
nødvendig
id="passord"
name="passord"
type="passord"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
glem passord?

variant="contained"
sx={{mt: 2}}
>
Logg inn





);
}
eksport standard pålogging;

Ved å pakke bokskomponenten rundt verktøykomponentene (og bruke sx prop) i koden ovenfor, vil du effektivt lage en fleksibel kolonnestruktur. Koden ovenfor vil produsere følgende React-påloggingsside i nettleseren din:

Hva er MUI Grid Component?

Grid-komponenten er en annen nyttig MUI-komponent å lære. Det faller inn i MUIs layoutkategori og letter respons. Det lar en utvikler oppnå responsiv design på grunn av sitt 12-kolonne layoutsystem. Dette layoutsystemet bruker MUIs fem standardbruddpunkter for å lage applikasjoner som tilpasser seg alle skjermstørrelser. Disse bruddpunktene inkluderer:

• xs (ekstra liten og starter på 0px)
• sm (liten og starter på 600px)
• md (medium og starter på 900px)
• lg (stor og starter på 1200px)
• xl (ekstra stor og starter på 1536 px)

MUIgrid-komponenten fungerer på samme måte som CSS flexbox-egenskapen ved at den har et enveis overordnet-underordnet system basert på to typer oppsett - beholder (overordnet) og elementer (underordnet). MUI-rutenettkomponenten letter imidlertid et nestet rutenett, der et element også kan være en beholder.

Utforsk andre stylingalternativer for ReactJS-applikasjoner

Denne artikkelen lærer deg hvordan du installerer og bruker MUI-biblioteket i React-applikasjonene dine. Du lærer hvordan du bruker noen grunnleggende komponenter (som typografi) og noen av de mer avanserte strukturelle komponentene (som bokskomponenten).

MUI-biblioteket er enkelt å bruke, effektivt og fungerer utmerket med React-apper. Men det betyr ikke at det er det eneste stylingalternativet som er tilgjengelig for React-utviklere. Hvis du bygger en React-applikasjon, står du fritt til å bruke MUI-biblioteket eller et hvilket som helst CSS-rammeverk for å style appen din.

Kadeisha Kean (33 artikler publisert)

Kadeisha Kean er en fullstack-programvareutvikler og teknisk/teknologiskribent. Hun har den utpregede evnen til å forenkle noen av de mest komplekse teknologiske konseptene; produsere materiale som lett kan forstås av enhver teknologinybegynner. Hun er lidenskapelig opptatt av å skrive, utvikle interessant programvare og reise verden rundt (gjennom dokumentarer).

Mer fra Kadeisha Kean