Che cos'è MUI e come puoi usarlo nei tuoi progetti ReactJS?

Nel settembre 2021, la società precedentemente nota come Material-UI ha cambiato nome in MUI. Questo cambiamento è avvenuto principalmente perché molte persone non riuscivano a distinguere Material-UI da Material Design (un sistema di progettazione).

MUI è iniziato come un'implementazione di Material Design su misura per le applicazioni React. Oggi il marchio si sta espandendo e sta cercando di creare un nuovo sistema di design, che sarà un'alternativa al Material Design.

L'acronimo MUI significa Materiale per costruire interfacce utente e in questo articolo imparerai esattamente come utilizzare MUI per creare interfacce utente React.

Come accedere a MUI in React?

MUI è disponibile come pacchetto npm. Pertanto, tutto ciò che devi fare per accedervi è eseguire la seguente riga di codice all'interno del tuo progetto React:

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

Ammesso che tu l'abbia già installato React sul tuo dispositivo, hai accesso completo alla libreria MUI e a tutti i suoi componenti. MUI ha oltre un centinaio di componenti diversi che rientrano in una delle seguenti categorie:

• Ingressi
• Visualizzazione dati
• Feedback
• Superfici
• Navigazione
• Disposizione
• Utili
• Griglia dati
• Appuntamento

Dopo aver installato MUI come pacchetto npm, l'utilizzo della libreria all'interno del progetto è semplice come importare il componente richiesto nel file appropriato e inserendo le tue preferenze di stile in posizioni specifiche in tutto l'interfaccia utente.

Se vuoi creare una pagina di accesso per la tua applicazione React, sono diversi componenti MUI che puoi utilizzare che ti faranno risparmiare tempo e ti aiuteranno a creare un design pulito.

Creazione del componente di accesso React

Per creare un nuovo componente in React, vai semplicemente alla cartella src di React e crea una nuova cartella del componente. La cartella del componente può essere la sede di tutti i tuoi componenti, a partire dal componente di accesso.

Imparentato: Che cos'è ReactJS e per cosa può essere utilizzato?

Il file Signin.js

import Reagire da 'reagire';
funzione Accesso() {
Restituzione (

);
}
esportare l'accesso predefinito;

Dopo aver creato il tuo componente di accesso, è il momento di collegarlo alla tua applicazione React importandolo nel componente della tua app (che si trova nella cartella src).

Il file App.js aggiornato

import Reagire da 'reagire';
import Signin da './components/Signin';
funzione App() {
Restituzione (






);
}
esporta l'app predefinita;

Ora puoi iniziare a esplorare i componenti MUI che desideri utilizzare nella pagina di accesso.

Che cos'è il componente tipografico?

Il componente tipografia appartiene alla categoria di visualizzazione dei dati di MUI e ha tredici varianti predefinite. Questi includono:

• h1
• h2
• h3
• h4
• h5
• h6
• sottotitolo1
• sottotitolo2
• corpo1
• corpo2
• pulsante
• didascalia
• sopralineato

La variante selezionata dovrebbe dipendere dal testo che si desidera visualizzare. Ad esempio, se desideri visualizzare un'intestazione, sei libero di utilizzare una delle sei varianti di intestazione nell'interfaccia utente. Basta inserire la variante prop e il valore selezionato nel componente tipografia.

Utilizzo dell'esempio del componente tipografia

import Reagire da 'reagire';
importa tipografia da '@mui/material/Typography';
funzione Accesso() {
Restituzione (


 Registrazione 



);
}
esportare l'accesso predefinito;

Un aspetto importante dal codice sopra è che ogni volta che inserisci un nuovo componente nella tua interfaccia utente, dovrai anche importarlo nella parte superiore del file del componente React. L'aggiornamento del componente di accesso con il componente tipografia (come mostrato nel codice sopra) produrrà il seguente output nel browser:

Che cos'è il componente del campo di testo?

Il componente del campo di testo appartiene alla categoria di input. Questo componente ha due semplici funzioni; consente agli utenti di inserire o modificare il testo in un'interfaccia utente. Il componente del campo di testo utilizza tre varianti, ovvero delineato, riempito e standard, con la variante delineata come predefinita. Pertanto, se si desidera utilizzare il componente del campo di testo predefinito, non è necessario includere la variante prop. Il componente del campo di testo utilizza anche molti altri oggetti di scena, tra cui etichetta, obbligatorio, tipo, id, disabilitato, ecc.

Utilizzo dell'esempio del componente del campo di testo

import Reagire da 'reagire';
importa TextField da '@mui/material/TextField';
importa tipografia da '@mui/material/Typography';
funzione Accesso() {
Restituzione (


 Registrazione 
label="Indirizzo e-mail"
necessario
ID = "e-mail"
nome = "e-mail"
/>
etichetta="Password"
necessario
id="password"
nome="password"
tipo="password"
/>



);
}
esportare l'accesso predefinito;

Il codice sopra produrrà il seguente output nel tuo browser:

Come suggerisce il nome, il componente link funziona allo stesso modo di un semplice link CSS. Rientra nella categoria di navigazione e ha il tradizionale href e gli oggetti di scena target. Inoltre, ha un colore, una variante e un puntello di sottolineatura.

Imparentato: Come utilizzare gli oggetti di scena in ReactJS

Tuttavia, non è necessario utilizzare oggetti di scena aggiuntivi a meno che tu non voglia che il tuo link appaia unico. Ad esempio, il valore predefinito della sottolineatura prop è "sempre" e gli altri due valori che puoi assegnare alla prop sono "none" e "hover".

Pertanto, devi solo includere il supporto di sottolineatura nel tuo componente quando non vuoi sottolineare o quando vuoi che abbia uno stato al passaggio del mouse.

dimenticare la password?

L'inserimento del codice sopra nel tuo componente di accesso esistente produrrà il seguente output nel tuo browser:

Che cos'è il componente pulsante?

Anche il componente pulsante appartiene alla categoria di input e aderisce alla funzionalità generale del pulsante, comunica le azioni di un utente alla tua applicazione. Questo componente utilizza una delle tre varianti (testo, contenuto e struttura) e ciascuna variante può essere visualizzata in uno dei tre stati: primario, disabilitato e collegato.

Una variante predefinita del componente pulsante è il testo. Pertanto, se si desidera un pulsante contenuto o delineato, sarà necessario utilizzare la variante prop per indicarlo. Oltre alla variante prop, il componente pulsante ha anche un gestore onclick e un supporto colore, tra gli altri.

Utilizzo dell'esempio del componente pulsante

 Registrazione

L'inserimento del codice sopra nel tuo componente di accesso aggiornerà la tua interfaccia utente in modo che assomigli a quanto segue:

Ora hai un pulsante interattivo che rimane sospeso quando il mouse ci passa sopra. Ma tutti i componenti sono orizzontali e non sembra eccezionale.

Qual è il componente della scatola?

Theboxcomponent è esattamente ciò di cui hai bisogno per organizzare i componenti di utilità (come il componente pulsante) nella tua app React. Il componente box utilizza ansx prop, che ha accesso a tutte le proprietà di sistema (come altezza e larghezza) necessarie per organizzare i componenti nell'interfaccia utente.

Utilizzo dell'esempio del componente Box

import Reagire da 'reagire';
import Link da '@mui/material/Link';
importa TextField da '@mui/material/TextField';
importa tipografia da '@mui/material/Typography';
import { Button, Box } da '@mui/material';
funzione Accesso() {
Restituzione (


sx={{
mio: 8,
display: 'flessibile',
flexDirection: 'colonna',
alignItems: 'center',
}}>
 Registrazione 
label="Indirizzo e-mail"
necessario
ID = "e-mail"
nome = "e-mail"
margine = "normale"
/>
etichetta="Password"
necessario
id="password"
nome="password"
tipo="password"
margine = "normale"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
dimenticare la password?

variante="contenuto"
sx={{mt: 2}}
>
Registrazione





);
}
esportare l'accesso predefinito;

Avvolgendo il boxcomponent attorno ai componenti di utilità (e utilizzando il prop sx) nel codice sopra, creerai in modo efficace una struttura di colonne flessibili. Il codice sopra produrrà la seguente pagina di accesso a React nel tuo browser:

Che cos'è il componente griglia MUI?

Il componente griglia è un altro utile componente MUI da imparare. Rientra nella categoria di layout di MUI e facilita la reattività. Consente a uno sviluppatore di ottenere un design reattivo grazie al suo sistema di layout a 12 colonne. Questo sistema di layout utilizza i cinque breakpoint predefiniti di MUI per creare applicazioni che si adattano a qualsiasi dimensione dello schermo. Questi punti di interruzione includono:

• xs (extra-piccolo e inizia a 0px)
• cmq (piccolo e inizia a 600px)
• md (medio e inizia a 900px)
• lg (grande e inizia a 1200px)
• xl (extra-large e inizia a 1536px)

Il componente MUIgrid funziona allo stesso modo della proprietà flexbox CSS in quanto ha un sistema genitore-figlio unidirezionale basato su due tipi di layout: contenitore (genitore) ed elementi (figlio). Tuttavia, il componente griglia MUI facilita una griglia nidificata, in cui un elemento può anche essere un contenitore.

Esplora altre opzioni di stile per le applicazioni ReactJS

Questo articolo ti insegna come installare e utilizzare la libreria MUI nelle tue applicazioni React. Imparerai come utilizzare alcuni componenti di base (come la tipografia) e alcuni dei componenti strutturali più avanzati (come il componente della scatola).

La libreria MUI è facile da usare, efficace e funziona alla grande con le app React. Ma ciò non significa che sia l'unica opzione di stile disponibile per gli sviluppatori di React. Se stai creando un'applicazione React, sei libero di utilizzare la libreria MUI o qualsiasi framework CSS per modellare la tua app.

Kadeisha Kean (33 articoli pubblicati)

Kadeisha Kean è uno sviluppatore software full-stack e scrittore tecnico/tecnologico. Ha la spiccata capacità di semplificare alcuni dei concetti tecnologici più complessi; producendo materiale che può essere facilmente compreso da qualsiasi principiante della tecnologia. È appassionata di scrivere, sviluppare software interessanti e viaggiare per il mondo (attraverso documentari).

Altro da Kadeisha Kean