Mi az a MUI, és hogyan használhatja a ReactJS projektjeiben?

2021 szeptemberében a korábban Material-UI néven ismert cég MUI-ra változtatta a nevét. Ez a változás elsősorban azért történt, mert sokan nem tudták megkülönböztetni a Material-UI-t a Material Designtól (egy tervezőrendszertől).

A MUI a React alkalmazásokhoz szabott Material Design megvalósításaként indult. Manapság a márka terjeszkedik, és egy új tervezési rendszer létrehozására törekszik, amely az anyagdizájn alternatívája lesz.

A MUI mozaikszó jelentése: Anyag a felhasználói felületek létrehozásához, és ebből a cikkből megtudhatja, hogyan kell pontosan használni a MUI-t a React felhasználói felületek létrehozásához.

Hogyan lehet elérni a MUI-t a Reactban?

A MUI npm csomagként érhető el. Ezért a hozzáféréshez mindössze annyit kell tennie, hogy végrehajtja a következő kódsort a React projekten belül:

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

Feltéve, hogy már megtetted telepítette a Reactot az eszközére, teljes hozzáférése van a MUI könyvtárhoz és annak összes összetevőjéhez. A MUI több mint száz különböző összetevőt tartalmaz, amelyek a következő kategóriák egyikébe tartoznak:

• Bemenetek
• Adatok megjelenítése
• Visszacsatolás
• Felületek
• Navigáció
• Elrendezés
• Utils
• Adatrács
• Dátum idő

Miután telepítette a MUI-t npm-csomagként, a könyvtár használata a projekten belül olyan egyszerű, mint a a szükséges összetevőt a megfelelő fájlban, és beillesztheti stílusbeállításait meghatározott helyekre az UI.

Ha szeretne létrehozni egy bejelentkezési oldalt a React alkalmazásához, akkor ezek több MUI-összetevőt is használhatnak, amelyek időt takaríthatnak meg, és segítenek letisztult megjelenés létrehozásában.

A React bejelentkezési komponens létrehozása

Ha új összetevőt szeretne létrehozni a Reactban, egyszerűen lépjen a React src mappájába, és hozzon létre egy új összetevő mappát. Az összetevő mappa az összes összetevő otthona lehet, kezdve a bejelentkezési összetevővel.

Összefüggő: Mi az a ReactJS, és mire használható?

A Signin.js fájl

import React from 'react';
function Signin() {
Visszatérés (

);
}
alapértelmezett bejelentkezés exportálása;

A bejelentkezési összetevő létrehozása után itt az ideje, hogy összekapcsolja azt a React alkalmazással az alkalmazásösszetevőbe (az src mappában található) importálásával.

A frissített App.js fájl

import React from 'react';
bejelentkezés importálása innen: './components/Signin';
function App() {
Visszatérés (






);
}
alapértelmezett alkalmazás exportálása;

Most megkezdheti a bejelentkezési oldalon használni kívánt MUI-összetevők felfedezését.

Mi a tipográfiai komponens?

A tipográfiai komponens a MUI adatmegjelenítési kategóriájába tartozik, és tizenhárom alapértelmezett változata van. Ezek tartalmazzák:

• h1
• h2
• h3
• h4
• h5
• h6
• alcím1
• alcím2
• test1
• test2
• gomb
• felirat
• overline

A kiválasztott változat a megjeleníteni kívánt szövegtől függ. Például, ha meg szeretne jeleníteni egy címsort, szabadon használhatja a hat címsorváltozat bármelyikét a felhasználói felületen. Egyszerűen illessze be a változat-támasztékot és a kiválasztott értéket a tipográfiai komponensbe.

A tipográfiai komponens példa használata

import React from 'react';
tipográfia importálása a '@mui/material/Typography' címről;
function Signin() {
Visszatérés (


 Bejelentkezés 



);
}
alapértelmezett bejelentkezés exportálása;

A fenti kód egyik fontos levonása, hogy minden alkalommal, amikor új összetevőt illeszt be a felhasználói felületbe, azt is importálnia kell a React összetevőfájl tetejére. Ha frissíti a bejelentkezési összetevőt a tipográfiai összetevővel (amint az a fenti kódban látható), a következő kimenet jelenik meg a böngészőben:

Mi a szövegmező komponens?

A szövegmező komponens a beviteli kategóriába tartozik. Ennek az összetevőnek két egyszerű funkciója van; lehetővé teszi a felhasználók számára a szöveg beírását vagy szerkesztését a felhasználói felületen. A szövegmező komponens három változatot használ, nevezetesen vázolt, kitöltött és szabványos, a körvonalazott változat az alapértelmezett. Ezért, ha az alapértelmezett szövegmező-összetevőt szeretné használni, nem kell megadnia a változat-propót. A szövegmező komponens számos más kelléket is használ, beleértve a címke, kötelező, típus, azonosító, letiltott stb.

A szövegmező-összetevő példa használata

import React from 'react';
szövegmező importálása a '@mui/material/TextField' címről;
tipográfia importálása a '@mui/material/Typography' címről;
function Signin() {
Visszatérés (


 Bejelentkezés 
label="E-mail cím"
kívánt
id="e-mail"
name="email"
/>
label="Jelszó"
kívánt
id="jelszó"
name="jelszó"
type="jelszó"
/>



);
}
alapértelmezett bejelentkezés exportálása;

A fenti kód a következő kimenetet produkálja a böngészőjében:

Ahogy a neve is sugallja, a linkkomponens ugyanúgy működik, mint egy egyszerű CSS-hivatkozás. A navigációs kategóriába tartozik, és rendelkezik a hagyományos href és cél kellékekkel. Ezen kívül van egy színe, egy változata és egy aláhúzott kelléke.

Összefüggő: A kellékek használata a ReactJS-ben

Azonban nincs szükség további kellékek használatára, hacsak nem szeretné, hogy a link egyedinek tűnjön. Például az aláhúzott támasz alapértelmezett értéke „mindig”, a másik két érték pedig, amelyet hozzárendelhet a támasztékhoz, a „none” és a „hover”.

Ezért csak akkor kell az aláhúzást felvennie az összetevőbe, ha nem akarja aláhúzni, vagy ha azt szeretné, hogy lebegő állapota legyen.

elfelejtett jelszo?

A fenti kód beillesztése a meglévő bejelentkezési összetevőbe a következő kimenetet eredményezi a böngészőben:

Mi a gomb alkatrésze?

A gombkomponens szintén a beviteli kategóriához tartozik, és betartja az általános gombfunkciókat, és a felhasználó műveleteit közli az alkalmazással. Ez az összetevő a három változat egyikét használja (szöveg, foglalt és vázlat), és mindegyik változat a három állapot egyikében jelenhet meg – elsődleges, letiltott és csatolt.

A gombkomponens alapértelmezett változata a szöveg. Ezért, ha tartalmazott vagy körvonalazott gombot szeretne, akkor ennek jelzésére a változat propot kell használnia. A változat-támasz mellett a gombkomponens egy onclick kezelővel és egy színes támasztékkal is rendelkezik – többek között.

Példa a gombösszetevőre

 Bejelentkezés

Ha beilleszti a fenti kódot a bejelentkezési összetevőbe, a felhasználói felület a következőképpen fog kinézni:

Most már van egy interaktív gombja, amely lebeg, amikor az egér rajta fut. De minden alkatrész vízszintes, és nem néz ki jól.

Mi a doboz alkatrésze?

A dobozkomponens pontosan az, amire szüksége van a segédprogram-összetevők (például a gombkomponens) rendszerezéséhez a React alkalmazásban. A doboz komponens ansx prop-ot használ, amely hozzáfér az összes rendszertulajdonsághoz (például magassághoz és szélességhez), amelyre szüksége van a felhasználói felület összetevőinek rendszerezéséhez.

A doboz komponens példája segítségével

import React from 'react';
import hivatkozás a '@mui/material/Link' címről;
szövegmező importálása a '@mui/material/TextField' címről;
tipográfia importálása a '@mui/material/Typography' címről;
import { Button, Box } innen: '@mui/material';
function Signin() {
Visszatérés (


sx={{
én: 8,
kijelző: "flex",
flexDirection: 'oszlop',
alignItems: 'center',
}}>
 Bejelentkezés 
label="E-mail cím"
kívánt
id="e-mail"
name="email"
margin="normal"
/>
label="Jelszó"
kívánt
id="jelszó"
name="jelszó"
type="jelszó"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
elfelejtett jelszo?

variáns="tartalmazott"
sx={{mt: 2}}
>
Bejelentkezés





);
}
alapértelmezett bejelentkezés exportálása;

Ha a fenti kódban a boxkomponenst a segédprogram-összetevők köré csavarja (és az sx prop használatával), akkor hatékonyan hoz létre egy rugalmas oszlopszerkezetet. A fenti kód a következő React bejelentkezési oldalt hozza létre a böngészőjében:

Mi az a MUI Grid komponens?

A grid komponens egy másik hasznos megtanulandó MUI-komponens. A MUI elrendezési kategóriájába tartozik, és megkönnyíti a reagálást. Lehetővé teszi a fejlesztők számára, hogy érzékeny tervezést érjenek el a 12 oszlopos elrendezési rendszerének köszönhetően. Ez az elrendezési rendszer a MUI öt alapértelmezett töréspontját használja fel bármilyen képernyőmérethez alkalmazkodó alkalmazások létrehozásához. Ezek a töréspontok a következők:

• xs (extra kicsi és 0 képpontnál kezdődik)
• sm (kicsi és 600 képponttól kezdődik)
• md (közepes és 900 képponttól kezdődik)
• lg (nagy és 1200 képponttól kezdődik)
• xl (extra nagy és 1536 képpontnál kezdődik)

A MUIgrid komponens ugyanúgy működik, mint a CSS flexbox tulajdonság, mivel kétféle elrendezésen – tárolón (szülő) és tételeken (gyermek) alapuló – egyirányú szülő-gyermek rendszerrel rendelkezik. A MUI rácskomponens azonban lehetővé teszi a beágyazott rácsot, ahol egy elem egyben tároló is lehet.

Fedezze fel a ReactJS alkalmazások egyéb stíluslehetőségeit

Ebből a cikkből megtudhatja, hogyan telepítheti és használhatja a MUI-könyvtárat a React-alkalmazásokban. Megtanulja, hogyan kell használni néhány alapvető összetevőt (például tipográfiát) és néhány fejlettebb szerkezeti összetevőt (például a doboz komponenst).

A MUI-könyvtár könnyen használható, hatékony és kiválóan működik a React alkalmazásokkal. Ez azonban nem jelenti azt, hogy ez az egyetlen stíluslehetőség, amely elérhető a React fejlesztői számára. Ha React alkalmazást készít, szabadon használhatja a MUI-könyvtárat vagy bármely CSS-keretrendszert az alkalmazás stílusának kialakításához.

Kadeisha Kean (33 cikk megjelent)

Kadeisha Kean Full-stack szoftverfejlesztő és műszaki/technológiai író. Megvan az a képessége, hogy leegyszerűsítse a legbonyolultabb technológiai fogalmakat; olyan anyagok gyártása, amelyek könnyen megérthetők minden technológiai kezdő számára. Szenvedélye az írás, az érdekes szoftverek fejlesztése és a világutazás (dokumentumfilmeken keresztül).

Továbbiak Kadeisha Keantől