Was ist MUI und wie können Sie es in Ihren ReactJS-Projekten verwenden?

Im September 2021 änderte das früher als Material-UI bekannte Unternehmen seinen Namen in MUI. Diese Änderung geschah hauptsächlich, weil viele Leute Material-UI nicht von Material Design (einem Designsystem) unterscheiden konnten.

MUI begann als eine auf React-Anwendungen zugeschnittene Implementierung von Material Design. Heute expandiert die Marke und sucht nach einem neuen Designsystem, das eine Alternative zum Material Design sein wird.

Das Akronym MUI bedeutet Material to build UIs, und in diesem Artikel erfahren Sie genau, wie Sie MUI zum Erstellen von React-UIs verwenden.

Wie greife ich in React auf MUI zu?

MUI ist als npm-Paket verfügbar. Daher müssen Sie nur die folgende Codezeile in Ihrem React-Projekt ausführen, um darauf zuzugreifen:

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

Vorausgesetzt, Sie haben es bereits React auf Ihrem Gerät installiert, haben Sie vollen Zugriff auf die MUI-Bibliothek und alle ihre Komponenten. MUI hat über hundert verschiedene Komponenten, die in eine der folgenden Kategorien fallen:

• Eingänge
• Datenanzeige
• Rückmeldung
• Oberflächen
• Navigation
• Layout
• Dienstprogramme
• Datenraster
• Terminzeit

Nach der Installation von MUI als npm-Paket ist die Verwendung der Bibliothek in Ihrem Projekt so einfach wie das Importieren der erforderliche Komponente in der entsprechenden Datei und das Einfügen Ihrer Stilpräferenzen an bestimmten Stellen überall die Benutzeroberfläche.

Wenn Sie eine Anmeldeseite für Ihre React-Anwendung erstellen möchten, können Sie mehrere MUI-Komponenten verwenden, die Zeit sparen und Ihnen helfen, ein sauberes Design zu erstellen.

Erstellen der React-Anmeldekomponente

Um eine neue Komponente in React zu erstellen, navigieren Sie einfach zum src-Ordner von React und erstellen Sie einen neuen Komponentenordner. Der Komponentenordner kann das Zuhause aller Ihrer Komponenten sein, beginnend mit der Anmeldekomponente.

Verwandt: Was ist ReactJS und wofür kann es verwendet werden?

Die Signin.js-Datei

importiere React aus 'react';
Funktion Anmelden () {
Rückkehr (

);
}
Standard-Anmeldung exportieren;

Nachdem Sie Ihre Anmeldekomponente erstellt haben, müssen Sie sie mit Ihrer React-Anwendung verknüpfen, indem Sie sie in Ihre App-Komponente (im Ordner src) importieren.

Die aktualisierte App.js-Datei

importiere React aus 'react';
Importieren Sie die Anmeldung von './components/Signin';
Funktion App() {
Rückkehr (






);
}
Standard-App exportieren;

Jetzt können Sie mit der Erkundung der MUI-Komponenten beginnen, die Sie auf Ihrer Anmeldeseite verwenden möchten.

Was ist die Typografie-Komponente?

Die Typografie-Komponente gehört zur Kategorie der Datenanzeige von MUI und hat dreizehn Standardvarianten. Diese beinhalten:

• h1
• h2
• h3
• h4
• h5
• h6
• Untertitel1
• Untertitel2
• Körper1
• Körper2
• Taste
• Untertitel
• überstreichen

Welche Variante Sie auswählen, sollte sich nach dem Text richten, den Sie anzeigen möchten. Wenn Sie beispielsweise eine Überschrift anzeigen möchten, können Sie eine der sechs Überschriftenvarianten in Ihrer Benutzeroberfläche verwenden. Fügen Sie einfach die Varianten-Requisite und den ausgewählten Wert in die Typografie-Komponente ein.

Verwenden des Beispiels für die Typografiekomponente

importiere React aus 'react';
Importieren Sie Typografie aus '@mui/material/Typography';
Funktion Anmelden () {
Rückkehr (


 Einloggen 



);
}
Standard-Anmeldung exportieren;

Eine wichtige Erkenntnis aus dem obigen Code ist, dass Sie jedes Mal, wenn Sie eine neue Komponente in Ihre Benutzeroberfläche einfügen, diese auch oben in Ihrer React-Komponentendatei importieren müssen. Das Aktualisieren Ihrer Anmeldekomponente mit der Typografiekomponente (wie im obigen Code zu sehen) führt zu der folgenden Ausgabe in Ihrem Browser:

Was ist die Textfeldkomponente?

Die Textfeldkomponente gehört zur Eingabekategorie. Diese Komponente hat zwei einfache Funktionen; es ermöglicht Benutzern, den Text in einer Benutzeroberfläche einzugeben oder zu bearbeiten. Die Textfeldkomponente verwendet drei Varianten, nämlich umrandet, gefüllt und Standard, wobei die umrandete Variante die Standardvariante ist. Wenn Sie die Standardtextfeldkomponente verwenden möchten, müssen Sie daher die Varianteneigenschaft nicht einschließen. Die Textfeldkomponente verwendet auch mehrere andere Requisiten, einschließlich Label, Erforderlich, Typ, ID, Deaktiviert usw.

Verwenden des Beispiels für eine Textfeldkomponente

importiere React aus 'react';
importiere TextField aus '@mui/material/TextField';
Importieren Sie Typografie aus '@mui/material/Typography';
Funktion Anmelden () {
Rückkehr (


 Einloggen 
label="E-Mail-Adresse"
erforderlich
id="E-Mail"
name="email"
/>
label="Passwort"
erforderlich
id="Passwort"
name="Passwort"
type="Passwort"
/>



);
}
Standard-Anmeldung exportieren;

Der obige Code erzeugt in Ihrem Browser die folgende Ausgabe:

Wie der Name schon sagt, funktioniert die Link-Komponente genauso wie ein einfacher CSS-Link. Es fällt in die Navigationskategorie und hat die traditionellen href- und target-Requisiten. Darüber hinaus hat es eine Farbe, eine Variante und eine unterstrichene Requisite.

Verwandt: So verwenden Sie Requisiten in ReactJS

Sie müssen jedoch keine zusätzlichen Requisiten verwenden, es sei denn, Sie möchten, dass Ihr Link einzigartig aussieht. Der Standardwert der unterstrichenen Requisite ist beispielsweise „immer“ und die anderen beiden Werte, die Sie der Requisite zuweisen können, sind „none“ und „hover“.

Daher müssen Sie die Unterstreichungseigenschaft nur dann in Ihre Komponente aufnehmen, wenn Sie keine Unterstreichung wünschen oder einen Schwebezustand haben möchten.

Passwort vergessen?

Wenn Sie den obigen Code in Ihre vorhandene Anmeldekomponente einfügen, wird in Ihrem Browser die folgende Ausgabe erzeugt:

Was ist die Schaltflächenkomponente?

Die Schaltflächenkomponente gehört ebenfalls zur Eingabekategorie und hält sich an die allgemeine Schaltflächenfunktionalität, sie kommuniziert die Aktionen eines Benutzers an Ihre Anwendung. Diese Komponente verwendet eine von drei Varianten (Text, Enthalten und Gliederung), und jede Variante kann in einem von drei Zuständen erscheinen – primär, deaktiviert und verknüpft.

Eine Standardvariante einer Schaltflächenkomponente ist Text. Wenn Sie also eine enthaltene oder umrissene Schaltfläche wünschen, müssen Sie die Variant-Eigenschaft verwenden, um dies anzugeben. Neben der Variant-Prop hat die Button-Komponente unter anderem auch einen onclick-Handler und ein Color-Prop.

Verwenden des Beispiels für die Schaltflächenkomponente

 Einloggen

Wenn Sie den obigen Code in Ihre Anmeldekomponente einfügen, wird Ihre Benutzeroberfläche wie folgt aktualisiert:

Jetzt haben Sie eine interaktive Schaltfläche, die schwebt, wenn die Maus darüber fährt. Aber alle Komponenten sind horizontal, und es sieht nicht gut aus.

Was ist die Box-Komponente?

Die Box-Komponente ist genau das, was Sie brauchen, um Dienstprogrammkomponenten (wie die Schaltflächenkomponente) in Ihrer React-App zu organisieren. Die Box-Komponente verwendet ansx prop, die Zugriff auf alle Systemeigenschaften (wie Höhe und Breite) hat, die Sie zum Organisieren der Komponenten in Ihrer Benutzeroberfläche benötigen.

Verwendung des Box-Komponenten-Beispiels

importiere React aus 'react';
Importieren Sie den Link von '@mui/material/Link';
importiere TextField aus '@mui/material/TextField';
Importieren Sie Typografie aus '@mui/material/Typography';
import { Button, Box } from '@mui/material';
Funktion Anmelden () {
Rückkehr (


sx={{
mein: 8,
Anzeige: 'flex',
flexDirection: 'Spalte',
alignItems: 'zentrieren',
}}>
 Einloggen 
label="E-Mail-Adresse"
erforderlich
id="E-Mail"
name="email"
Rand="normal"
/>
label="Passwort"
erforderlich
id="Passwort"
name="Passwort"
type="Passwort"
Rand="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
Passwort vergessen?

Variante="enthalten"
sx={{mt: 2}}
>
Einloggen





);
}
Standard-Anmeldung exportieren;

Indem Sie die Boxkomponente im obigen Code um die Dienstprogrammkomponenten wickeln (und die sx-Prop verwenden), erstellen Sie effektiv eine flexible Spaltenstruktur. Der obige Code erzeugt die folgende React-Anmeldeseite in Ihrem Browser:

Was ist eine MUI-Grid-Komponente?

Die Grid-Komponente ist eine weitere nützliche MUI-Komponente, die es zu lernen gilt. Es fällt in die Layout-Kategorie von MUI und erleichtert die Reaktionsfähigkeit. Es ermöglicht einem Entwickler aufgrund seines 12-spaltigen Layoutsystems ein responsives Design zu erreichen. Dieses Layoutsystem verwendet die fünf Standardhaltepunkte von MUI, um Anwendungen zu erstellen, die sich an jede Bildschirmgröße anpassen. Zu diesen Haltepunkten gehören:

• xs (extra-klein und beginnt bei 0px)
• sm (klein und beginnt bei 600px)
• md (mittel und beginnt bei 900px)
• lg (groß und beginnt bei 1200px)
• xl (extra groß und ab 1536px)

Die MUIgrid-Komponente funktioniert genauso wie die CSS-Flexbox-Eigenschaft, da sie ein unidirektionales Eltern-Kind-System hat, das auf zwei Arten von Layouts basiert – Container (übergeordnet) und Elemente (untergeordnet). Die MUI-Grid-Komponente ermöglicht jedoch ein verschachteltes Grid, bei dem ein Element auch ein Container sein kann.

Entdecken Sie andere Styling-Optionen für ReactJS-Anwendungen

In diesem Artikel erfahren Sie, wie Sie die MUI-Bibliothek in Ihren React-Anwendungen installieren und verwenden. Sie lernen, einige grundlegende Komponenten (wie Typografie) und einige der fortgeschritteneren strukturellen Komponenten (wie die Box-Komponente) zu verwenden.

Die MUI-Bibliothek ist einfach zu bedienen, effektiv und funktioniert hervorragend mit React-Apps. Das bedeutet jedoch nicht, dass es die einzige Styling-Option für React-Entwickler ist. Wenn Sie eine React-Anwendung erstellen, können Sie die MUI-Bibliothek oder ein beliebiges CSS-Framework verwenden, um Ihre Anwendung zu gestalten.

Kadeisha Kean (33 veröffentlichte Artikel)

Kadeisha Kean ist Full-Stack-Softwareentwicklerin und Technik- und Technologieautorin. Sie hat die ausgeprägte Fähigkeit, einige der komplexesten technologischen Konzepte zu vereinfachen; Herstellung von Material, das von jedem Technikneuling leicht verstanden werden kann. Sie schreibt leidenschaftlich gerne, entwickelt interessante Software und bereist die Welt (durch Dokumentationen).

Mehr von Kadeisha Kean