Wat is MUI en hoe kun je het gebruiken in je ReactJS-projecten?

In september 2021 veranderde het bedrijf dat voorheen bekend stond als Material-UI haar naam in MUI. Deze verandering gebeurde vooral omdat veel mensen Material-UI niet konden onderscheiden van Material Design (een ontwerpsysteem).

MUI begon als een implementatie van Material Design op maat voor React-toepassingen. Vandaag breidt het merk uit en is het op zoek naar een nieuw ontwerpsysteem dat een alternatief zal zijn voor Material Design.

Het acroniem MUI betekent Materiaal om UI's te bouwen, en in dit artikel leer je precies hoe je MUI kunt gebruiken om React UI's te bouwen.

Hoe toegang krijgen tot MUI in React?

MUI is beschikbaar als een npm-pakket. Daarom hoef je alleen maar de volgende regel code uit te voeren in je React-project:

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

Ervan uitgaande dat je dat al hebt gedaan geïnstalleerd Reageren op uw apparaat, hebt u volledige toegang tot de MUI-bibliotheek en al zijn componenten. MUI heeft meer dan honderd verschillende componenten die in een van de volgende categorieën vallen:

• Ingangen
• Gegevensweergave
• Feedback
• Oppervlakken
• Navigatie
• Lay-out
• Hulpprogramma's
• Data rooster
• Datum Tijd

Na het installeren van MUI als een npm-pakket, is het gebruik van de bibliotheek binnen uw project net zo eenvoudig als het importeren van de vereiste component in het juiste bestand en uw stijlvoorkeuren overal op specifieke locaties invoegen de gebruikersinterface.

Als u een aanmeldingspagina voor uw React-toepassing wilt maken, zijn dit verschillende MUI-componenten die u kunt gebruiken die tijd besparen en u helpen een strak ontwerp te maken.

De React-aanmeldingscomponent maken

Om een ​​nieuwe component in React te maken, navigeert u eenvoudig naar de src-map van React en maakt u een nieuwe componentmap. De componentmap kan de thuisbasis zijn van al uw componenten, te beginnen met de aanmeldingscomponent.

Verwant: Wat is ReactJS en waarvoor kan het worden gebruikt?

Het Signin.js-bestand

import Reageren vanuit 'reageren';
functie Aanmelden() {
opbrengst (

);
}
export standaard Aanmelden;

Nadat je je inlogcomponent hebt gemaakt, is het tijd om deze te koppelen aan je React-toepassing door deze te importeren in je app-component (in de src-map).

Het bijgewerkte App.js-bestand

import Reageren vanuit 'reageren';
importeer aanmelding van './componenten/aanmelding';
functie App() {
opbrengst (






);
}
export standaard app;

Nu kunt u beginnen met het verkennen van de MUI-componenten die u op uw aanmeldingspagina wilt gebruiken.

Wat is de typografiecomponent?

De typografiecomponent behoort tot de gegevensweergavecategorie van MUI en heeft dertien standaardvarianten. Waaronder:

• h1
• h2
• h3
• h4
• h5
• h6
• ondertitel1
• ondertitel2
• lichaam1
• lichaam2
• knop
• onderschrift
• overschrijven

De variant die u selecteert, moet afhangen van de tekst die u wilt weergeven. Als u bijvoorbeeld een kop wilt weergeven, kunt u een van de zes kopvarianten in uw gebruikersinterface gebruiken. Voeg eenvoudig de variantsteun en de geselecteerde waarde in de typografiecomponent in.

Het voorbeeld van de typografiecomponent gebruiken

import Reageren vanuit 'reageren';
typografie importeren uit '@mui/materiaal/Typografie';
functie Aanmelden() {
opbrengst (


 Inloggen 



);
}
export standaard Aanmelden;

Een belangrijk voordeel van de bovenstaande code is dat elke keer dat u een nieuwe component in uw gebruikersinterface invoegt, u deze ook bovenaan uw React-componentbestand moet importeren. Het bijwerken van uw aanmeldingscomponent met de typografiecomponent (zoals te zien in de bovenstaande code) zal de volgende uitvoer in uw browser produceren:

Wat is de tekstveldcomponent?

De tekstveldcomponent behoort tot de invoercategorie. Dit onderdeel heeft twee eenvoudige functies; het stelt gebruikers in staat om de tekst in een gebruikersinterface in te voeren of te bewerken. De tekstveldcomponent gebruikt drie varianten, namelijk omlijnd, gevuld en standaard, waarbij de omlijnde variant de standaardvariant is. Als u de standaardtekstveldcomponent wilt gebruiken, hoeft u daarom de variantprop niet op te nemen. De tekstveldcomponent gebruikt ook verschillende andere rekwisieten, waaronder label, vereist, type, id, uitgeschakeld, enz.

Het voorbeeld van de tekstveldcomponent gebruiken

import Reageren vanuit 'reageren';
importeer TextField van '@mui/material/TextField';
typografie importeren uit '@mui/materiaal/Typografie';
functie Aanmelden() {
opbrengst (


 Inloggen 
label="E-mailadres"
verplicht
id="e-mail"
naam = "e-mail"
/>
label="Wachtwoord"
verplicht
id="wachtwoord"
naam = "wachtwoord"
typ = "wachtwoord"
/>



);
}
export standaard Aanmelden;

De bovenstaande code produceert de volgende uitvoer in uw browser:

Zoals de naam al doet vermoeden, functioneert de linkcomponent op dezelfde manier als een gewone CSS-link. Het valt in de navigatiecategorie en heeft de traditionele href en target props. Daarnaast heeft het een kleur, een variant en een onderstrepen prop.

Verwant: Hoe rekwisieten te gebruiken in ReactJS

Het is echter niet nodig om extra rekwisieten te gebruiken, tenzij u wilt dat uw link er uniek uitziet. De standaardwaarde van de onderstreepte prop is bijvoorbeeld "altijd" en de andere twee waarden die u aan de prop kunt toewijzen zijn "none" en "hover".

Daarom hoeft u de onderstrepingsprop alleen in uw component op te nemen als u geen onderstreping wilt of wanneer u wilt dat deze een zweeftoestand heeft.

wachtwoord vergeten?

Als u de bovenstaande code invoegt in uw bestaande aanmeldingscomponent, wordt de volgende uitvoer in uw browser geproduceerd:

Wat is de knopcomponent?

De knopcomponent behoort ook tot de invoercategorie en houdt zich aan de algemene knopfunctionaliteit. Het communiceert de acties van een gebruiker naar uw toepassing. Deze component gebruikt een van de drie varianten (tekst, ingesloten en overzicht) en elke variant kan in een van de drie statussen voorkomen: primair, uitgeschakeld en gekoppeld.

Een standaardvariant van een knopcomponent is tekst. Daarom, als je een knop met een bevatte of een omlijnde knop wilt, moet je de variantprop gebruiken om dat aan te geven. Naast de variantprop heeft de knopcomponent onder andere ook een onclick-handler en een kleurenpropeller.

Voorbeeld van de knopcomponent gebruiken

 Inloggen

Als u de bovenstaande code invoegt in uw aanmeldingscomponent, wordt uw gebruikersinterface geüpdatet zodat deze er als volgt uitziet:

Nu heb je een interactieve knop die zweeft wanneer de muis eroverheen gaat. Maar alle componenten zijn horizontaal en het ziet er niet geweldig uit.

Wat is de dooscomponent?

Theboxcomponent is precies wat je nodig hebt om hulpprogrammacomponenten (zoals de knopcomponent) in je React-app te organiseren. De box-component gebruikt ansx prop, die toegang heeft tot alle systeemeigenschappen (zoals hoogte en breedte) die u nodig hebt om de componenten in uw gebruikersinterface te ordenen.

Het voorbeeld van de dooscomponent gebruiken

import Reageren vanuit 'reageren';
importeer Link van '@mui/materiaal/Link';
importeer TextField van '@mui/material/TextField';
typografie importeren uit '@mui/materiaal/Typografie';
importeer { Button, Box } van '@mui/material';
functie Aanmelden() {
opbrengst (


sx={{
mijn: 8,
weergave: 'flex',
flexDirection: 'kolom',
alignItems: 'midden',
}}>
 Inloggen 
label="E-mailadres"
verplicht
id="e-mail"
naam = "e-mail"
margin = "normaal"
/>
label="Wachtwoord"
verplicht
id="wachtwoord"
naam = "wachtwoord"
typ = "wachtwoord"
margin = "normaal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
wachtwoord vergeten?

variant = "bevat"
sx={{mt: 2}}
>
Inloggen





);
}
export standaard Aanmelden;

Door de dooscomponent rond de hulpprogrammacomponenten te wikkelen (en de sx-prop te gebruiken) in de bovenstaande code, creëert u effectief een flexibele kolomstructuur. De bovenstaande code zal de volgende React-aanmeldingspagina in uw browser produceren:

Wat is een MUI-rastercomponent?

De rastercomponent is een andere nuttige MUI-component om te leren. Het valt in de lay-outcategorie van MUI en vergemakkelijkt het reactievermogen. Het stelt een ontwikkelaar in staat een responsief ontwerp te bereiken vanwege het lay-outsysteem met 12 kolommen. Dit lay-outsysteem maakt gebruik van de vijf standaardbreekpunten van MUI om applicaties te maken die zich aanpassen aan elke schermgrootte. Deze breekpunten zijn onder meer:

• xs (extra klein en begint bij 0px)
• sm (klein en begint bij 600px)
• md (gemiddeld en begint bij 900px)
• lg (groot en begint bij 1200px)
• xl (extra groot en begint bij 1536px)

De MUIgridcomponent werkt op dezelfde manier als de CSS flexbox-eigenschap in die zin dat het een unidirectioneel ouder-kindsysteem heeft op basis van twee soorten lay-outs: container (ouder) en items (onderliggend). De MUI-rastercomponent maakt echter een genest raster mogelijk, waarbij een item ook een container kan zijn.

Ontdek andere stylingopties voor ReactJS-toepassingen

Dit artikel leert je hoe je de MUI-bibliotheek in je React-applicaties installeert en gebruikt. Je leert hoe je enkele basiscomponenten (zoals typografie) en enkele van de meer geavanceerde structurele componenten (zoals de dooscomponent) kunt gebruiken.

De MUI-bibliotheek is gebruiksvriendelijk, effectief en werkt uitstekend met React-apps. Maar dat betekent niet dat dit de enige stylingoptie is die beschikbaar is voor React-ontwikkelaars. Als u een React-toepassing bouwt, bent u vrij om de MUI-bibliotheek of een ander CSS-framework te gebruiken om uw app te stylen.

Kadeisha Kean (33 artikelen gepubliceerd)

Kadeisha Kean is een full-stack softwareontwikkelaar en technisch/technologisch schrijver. Ze heeft het onmiskenbare vermogen om enkele van de meest complexe technologische concepten te vereenvoudigen; materiaal produceren dat gemakkelijk kan worden begrepen door elke nieuwe technologie-beginner. Ze is gepassioneerd door schrijven, interessante software ontwikkelen en de wereld rondreizen (via documentaires).

Meer van Kadeisha Kean