Vad är MUI och hur kan du använda det i dina ReactJS-projekt?

I september 2021 bytte företaget tidigare känt som Material-UI namn till MUI. Denna förändring skedde främst för att många människor inte kunde skilja Material-UI från Material Design (ett designsystem).

MUI började som en implementering av Material Design skräddarsydd för React-applikationer. Idag expanderar varumärket och vill skapa ett nytt designsystem, som kommer att vara ett alternativ till Material Design.

Förkortningen MUI betyder Material för att bygga UI, och i den här artikeln kommer du att lära dig exakt hur du använder MUI för att bygga React UI.

Hur får man åtkomst till MUI i React?

MUI är tillgängligt som ett npm-paket. Allt du behöver göra för att komma åt det är att köra följande kodrad i ditt React-projekt:

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

Förutsatt att du redan har gjort det installerat React på din enhet, har du fullständig tillgång till MUI-biblioteket och alla dess komponenter. MUI har över hundra olika komponenter som faller inom en av följande kategorier:

• Ingångar
• Datavisning
• Respons
• Ytor
• Navigering
• Layout
• Utils
• Datanätet
• Datum Tid

Efter att ha installerat MUI som ett npm-paket är det lika enkelt att använda biblioteket i ditt projekt som att importera nödvändig komponent i lämplig fil och infoga dina stylingpreferenser på specifika platser genomgående användargränssnittet.

Om du vill skapa en inloggningssida för din React-applikation är de flera MUI-komponenter du kan använda som sparar tid och hjälper dig att skapa en ren design.

Skapar React-inloggningskomponenten

För att skapa en ny komponent i React, navigera helt enkelt till Reacts src-mapp och skapa en ny komponentmapp. Komponentmappen kan vara hemmet för alla dina komponenter, från och med inloggningskomponenten.

Relaterad: Vad är ReactJS och vad kan det användas till?

Filen Signin.js

importera Reagera från 'reagera';
function Signin() {
lämna tillbaka (

);
}
export standardinloggning;

När du har skapat din inloggningskomponent är det dags att länka den till din React-applikation genom att importera den till din appkomponent (finns i src-mappen).

Den uppdaterade App.js-filen

importera Reagera från 'reagera';
importera inloggning från './components/Signin';
function App() {
lämna tillbaka (






);
}
exportera standardapp;

Nu kan du börja utforska MUI-komponenterna du vill använda på din inloggningssida.

Vad är typografikomponenten?

Typografikomponenten tillhör MUI: s datavisningskategori och har tretton standardvarianter. Dessa inkluderar:

• h1
• h2
• h3
• h4
• h5
• h6
• undertext1
• undertext2
• kropp1
• kropp 2
• knapp
• rubrik
• överlinje

Vilken variant du väljer bör bero på texten du vill visa. Om du till exempel vill visa en rubrik är du fri att använda någon av de sex rubrikvarianterna i ditt användargränssnitt. Infoga helt enkelt varianten rekvisita och det valda värdet i typografikomponenten.

Använda exempel på typografikomponenten

importera Reagera från 'reagera';
importera typografi från '@mui/material/Typography';
function Signin() {
lämna tillbaka (


 Logga in 



);
}
export standardinloggning;

En viktig del av koden ovan är att varje gång du infogar en ny komponent i ditt användargränssnitt måste du också importera den överst i din React-komponentfil. Om du uppdaterar din inloggningskomponent med typografikomponenten (som framgår av koden ovan) får du följande utdata i din webbläsare:

Vad är textfältskomponenten?

Textfältskomponenten tillhör inmatningskategorin. Denna komponent har två enkla funktioner; det låter användare skriva in eller redigera texten i ett användargränssnitt. Textfältskomponenten använder tre varianter, nämligen outlined, filled och standard, där den outlined varianten är standardvarianten. Därför, om du vill använda standardtextfältskomponenten, behöver du inte inkludera varianten prop. Textfältskomponenten använder också flera andra rekvisita, inklusive etikett, obligatorisk, typ, id, inaktiverad, etc.

Använda textfältskomponentexemplet

importera Reagera från 'reagera';
importera TextField från '@mui/material/TextField';
importera typografi från '@mui/material/Typography';
function Signin() {
lämna tillbaka (


 Logga in 
label="E-postadress"
nödvändig
id="e-post"
name="e-post"
/>
label="Lösenord"
nödvändig
id="lösenord"
name="lösenord"
typ="lösenord"
/>



);
}
export standardinloggning;

Koden ovan kommer att producera följande utdata i din webbläsare:

Som namnet antyder fungerar länkkomponenten på samma sätt som en vanlig CSS-länk. Den faller inom navigeringskategorin och har de traditionella href- och målrekvisita. Dessutom har den en färg, en variant och en understruken rekvisita.

Relaterad: Hur man använder rekvisita i ReactJS

Det finns dock inget behov av att använda ytterligare rekvisita om du inte vill att din länk ska se unik ut. Till exempel är standardvärdet för understruket rekvisita "alltid" och de andra två värdena som du kan tilldela stödet är "ingen" och "hovra".

Därför behöver du bara inkludera understrykningsstödet i din komponent när du inte vill ha någon understrykning eller när du vill att den ska ha ett hovringsläge.

Glöm lösenord?

Om du infogar koden ovan i din befintliga inloggningskomponent får du följande utdata i din webbläsare:

Vad är knappkomponenten?

Knappkomponenten tillhör också inmatningskategorin och följer den allmänna knappfunktionaliteten, den kommunicerar en användares åtgärder till din applikation. Den här komponenten använder en av tre varianter (text, innesluten och kontur), och varje variant kan visas i en av tre tillstånd – primär, inaktiverad och länkad.

En standardvariant för knappkomponent är text. Därför, om du vill ha en innesluten eller skisserad knapp, måste du använda varianten rekvisita för att indikera det. Utöver varianten rekvisita har knappkomponenten även en onclick-hanterare och en färgpropp – bland annat.

Använda knappkomponentexempel

 Logga in

Om du infogar koden ovan i din inloggningskomponent uppdateras ditt användargränssnitt så att det ser ut så här:

Nu har du en interaktiv knapp som svävar när musen kör över den. Men alla komponenter är horisontella, och det ser inte bra ut.

Vad är boxkomponenten?

Theboxcomponent är precis vad du behöver för att organisera verktygskomponenter (som knappkomponenten) i din React-app. Box-komponenten använder ansx prop, som har tillgång till alla systemegenskaper (som höjd och bredd) som du behöver för att organisera komponenterna i ditt användargränssnitt.

Använda Box Component Exempel

importera Reagera från 'reagera';
importera länk från '@mui/material/Link';
importera TextField från '@mui/material/TextField';
importera typografi från '@mui/material/Typography';
importera { Button, Box } från '@mui/material';
function Signin() {
lämna tillbaka (


sx={{
min: 8,
visa: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}>
 Logga in 
label="E-postadress"
nödvändig
id="e-post"
name="e-post"
marginal="normal"
/>
label="Lösenord"
nödvändig
id="lösenord"
name="lösenord"
typ="lösenord"
marginal="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
Glöm lösenord?

variant="contained"
sx={{mt: 2}}
>
Logga in





);
}
export standardinloggning;

Genom att linda boxkomponenten runt verktygskomponenterna (och använda sx prop) i koden ovan skapar du effektivt en flexibel kolumnstruktur. Koden ovan ger följande React-inloggningssida i din webbläsare:

Vad är MUI Grid Component?

Grid-komponenten är en annan användbar MUI-komponent att lära sig. Det faller in i MUI: s layoutkategori och underlättar lyhördhet. Det tillåter en utvecklare att uppnå responsiv design på grund av dess layoutsystem med 12 kolumner. Detta layoutsystem använder MUI: s fem standardbrytpunkter för att skapa applikationer som anpassar sig till alla skärmstorlekar. Dessa brytpunkter inkluderar:

• xs (extra liten och börjar på 0px)
• sm (liten och börjar på 600px)
• md (medium och börjar på 900px)
• lg (stor och börjar på 1200px)
• xl (extra stor och börjar på 1536px)

MUIgridcomponenten fungerar på samma sätt som CSS flexbox-egenskapen genom att den har ett enkelriktat förälder-underordnat system baserat på två typer av layouter - behållare (förälder) och objekt (underordnad). MUI-rutnätskomponenten underlättar dock ett kapslat rutnät, där ett föremål också kan vara en behållare.

Utforska andra stylingalternativ för ReactJS-applikationer

Den här artikeln lär dig hur du installerar och använder MUI-biblioteket i dina React-applikationer. Du lär dig hur du använder vissa grundläggande komponenter (som typografi) och några av de mer avancerade strukturella komponenterna (som box-komponenten).

MUI-biblioteket är lätt att använda, effektivt och fungerar utmärkt med React-appar. Men det betyder inte att det är det enda stylingalternativet som finns tillgängligt för React-utvecklare. Om du bygger en React-applikation är du fri att använda MUI-biblioteket eller vilket CSS-ramverk som helst för att utforma din app.

Kadeisha Kean (33 artiklar publicerade)

Kadeisha Kean är en full-stack mjukvaruutvecklare och teknisk/teknikskribent. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska koncepten; producera material som lätt kan förstås av alla nybörjare. Hon brinner för att skriva, utveckla intressant programvara och att resa runt i världen (genom dokumentärer).

Mer från Kadeisha Kean