Co je MUI a jak jej můžete použít ve svých projektech ReactJS?

V září 2021 se společnost dříve známá jako Material-UI přejmenovala na MUI. K této změně došlo hlavně proto, že mnoho lidí nedokázalo rozlišit Material-UI od Material Design (designový systém).

MUI začalo jako implementace Material Designu na míru pro aplikace React. Dnes značka expanduje a snaží se vytvořit nový designový systém, který bude alternativou k Material Designu.

Zkratka MUI znamená Material to build UIs a v tomto článku se přesně dozvíte, jak používat MUI k vytváření uživatelských rozhraní React.

Jak získat přístup k MUI v Reactu?

MUI je k dispozici jako balíček npm. Proto vše, co musíte udělat, abyste se k němu dostali, je provést následující řádek kódu ve vašem projektu React:

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

Za předpokladu, že už ano nainstalovaný React na vašem zařízení, máte úplný přístup ke knihovně MUI a všem jejím součástem. MUI má více než sto různých komponent, které spadají do jedné z následujících kategorií:

• Vstupy
• Zobrazení dat
• Zpětná vazba
• Povrchy
• Navigace
• Rozložení
• Utils
• Datová mřížka
• Čas schůzky

Po instalaci MUI jako balíčku npm je používání knihovny v projektu stejně jednoduché jako import požadovanou komponentu v příslušném souboru a vložení vašich předvoleb stylu na konkrétní místa v celém textu uživatelského rozhraní.

Pokud chcete vytvořit přihlašovací stránku pro svou aplikaci React, můžete použít několik komponent MUI, které ušetří čas a pomohou vám vytvořit čistý design.

Vytvoření komponenty React Sign-in

Chcete-li vytvořit novou komponentu v Reactu, jednoduše přejděte do složky src Reactu a vytvořte novou složku komponenty. Složka komponent může být domovem všech vašich komponent, počínaje komponentou pro přihlášení.

Příbuzný: Co je ReactJS a k čemu se dá použít?

Soubor Signin.js

import Reagovat z 'reagovat';
function Signin() {
vrátit se (

);
}
exportovat výchozí přihlášení;

Po vytvoření komponenty pro přihlášení je čas propojit ji s vaší aplikací React tím, že ji importujete do komponenty aplikace (umístěné ve složce src).

Aktualizovaný soubor App.js

import Reagovat z 'reagovat';
importovat přihlášení z './components/Signin';
function App() {
vrátit se (






);
}
exportovat výchozí aplikaci;

Nyní můžete začít prozkoumávat komponenty MUI, které chcete použít na své přihlašovací stránce.

Co je to typografická složka?

Komponenta typografie patří do kategorie zobrazení dat MUI a má třináct výchozích variant. Tyto zahrnují:

• h1
• h2
• h3
• h4
• h5
• h6
• podtitul1
• podtitul2
• tělo1
• tělo2
• knoflík
• titulek
• overline

Varianta, kterou vyberete, by měla záviset na textu, který chcete zobrazit. Pokud například chcete zobrazit nadpis, můžete ve svém uživatelském rozhraní použít kteroukoli ze šesti variant nadpisu. Jednoduše vložte variantu a vybranou hodnotu do typografické komponenty.

Použití příkladu typografie

import Reagovat z 'reagovat';
import typografie z '@mui/material/Typography';
function Signin() {
vrátit se (


 Přihlásit se 



);
}
exportovat výchozí přihlášení;

Důležitým poznatkem z výše uvedeného kódu je, že pokaždé, když do uživatelského rozhraní vložíte novou komponentu, budete ji také muset importovat do horní části souboru komponenty React. Aktualizace komponenty pro přihlášení pomocí komponenty typografie (jak je vidět v kódu výše) vytvoří ve vašem prohlížeči následující výstup:

Co je komponenta textového pole?

Komponenta textového pole patří do vstupní kategorie. Tato součást má dvě jednoduché funkce; umožňuje uživatelům zadávat nebo upravovat text v uživatelském rozhraní. Komponenta textového pole používá tři varianty, a to obrysovou, vyplněnou a standardní, přičemž nastíněná varianta je výchozí. Pokud tedy chcete použít výchozí komponentu textového pole, nemusíte zahrnout variantu. Komponenta textového pole také používá několik dalších rekvizit, včetně štítku, povinného, ​​typu, id, zakázáno atd.

Příklad použití komponenty Textové pole

import Reagovat z 'reagovat';
import TextField z '@mui/material/TextField';
import typografie z '@mui/material/Typography';
function Signin() {
vrátit se (


 Přihlásit se 
label="E-mailová adresa"
Požadované
id="e-mail"
name="e-mail"
/>
label="Heslo"
Požadované
id="heslo"
name="heslo"
type="heslo"
/>



);
}
exportovat výchozí přihlášení;

Výše uvedený kód vytvoří ve vašem prohlížeči následující výstup:

Jak název napovídá, komponenta odkazu funguje stejným způsobem jako prostý odkaz CSS. Spadá do kategorie navigace a má tradiční href a cílové rekvizity. Navíc má barvu, variantu a podtrženou rekvizitu.

Příbuzný: Jak používat rekvizity v ReactJS

Není však nutné používat žádné další rekvizity, pokud nechcete, aby váš odkaz vypadal jedinečně. Například výchozí hodnota podtržené rekvizity je „vždy“ a další dvě hodnoty, které můžete rekvizi přiřadit, jsou „žádná“ a „hover“.

Proto stačí zahrnout podtržení do komponenty pouze tehdy, když nechcete žádné podtržení nebo když chcete, aby byl ve stavu vznášení.

zapomenout heslo?

Vložením výše uvedeného kódu do vaší stávající přihlašovací komponenty vytvoříte ve vašem prohlížeči následující výstup:

Co je komponenta tlačítka?

Komponenta tlačítka také patří do vstupní kategorie a dodržuje obecnou funkcionalitu tlačítek a sděluje akce uživatele vaší aplikaci. Tato komponenta používá jednu ze tří variant (textová, obsažená a obrysová) a každá varianta se může objevit v jednom ze tří stavů – primární, vypnutý a propojený.

Výchozí variantou komponenty tlačítka je text. Pokud tedy chcete tlačítko s obsaženým nebo obrysovým obrysem, budete k tomu muset použít variantu podpěry. Kromě varianty prop má komponenta tlačítka také onclick handler a barevnou prop — mimo jiné.

Použití příkladu komponenty tlačítka

 Přihlásit se

Vložením výše uvedeného kódu do komponenty pro přihlášení se vaše uživatelské rozhraní aktualizuje tak, aby vypadalo takto:

Nyní máte interaktivní tlačítko, které se pohybuje, když na něj přejedete myší. Ale všechny komponenty jsou vodorovné a nevypadá to skvěle.

Co je součástí krabice?

Theboxcomponent je přesně to, co potřebujete k uspořádání pomocných komponent (jako je komponenta tlačítka) ve vaší aplikaci React. Komponenta box používá prop ansx, který má přístup ke všem vlastnostem systému (jako je výška a šířka), které potřebujete k uspořádání komponent ve svém uživatelském rozhraní.

Použití příkladu součásti krabice

import Reagovat z 'reagovat';
importovat odkaz z '@mui/material/Link';
import TextField z '@mui/material/TextField';
import typografie z '@mui/material/Typography';
import { Button, Box } z '@mui/material';
function Signin() {
vrátit se (


sx={{
moje: 8,
displej: 'flex',
flexDirection: 'sloupec',
alignItems: 'centrum',
}}>
 Přihlásit se 
label="E-mailová adresa"
Požadované
id="e-mail"
name="e-mail"
margin="normální"
/>
label="Heslo"
Požadované
id="heslo"
name="heslo"
type="heslo"
margin="normální"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
zapomenout heslo?

variant="contained"
sx={{mt: 2}}
>
Přihlásit se





);
}
exportovat výchozí přihlášení;

Obalením komponenty box kolem komponentů utility (a použitím prop sx) ve výše uvedeném kódu efektivně vytvoříte strukturu flexibilního sloupce. Výše uvedený kód vytvoří ve vašem prohlížeči následující přihlašovací stránku React:

Co je komponenta MUI Grid?

Komponenta mřížky je další užitečnou komponentou MUI, kterou se musíte naučit. Spadá do kategorie rozvržení MUI a usnadňuje odezvu. Umožňuje vývojářům dosáhnout citlivého designu díky systému rozvržení s 12 sloupci. Tento systém rozložení využívá pět výchozích bodů přerušení MUI k vytváření aplikací, které se přizpůsobí jakékoli velikosti obrazovky. Mezi tyto body přerušení patří:

• xs (extra malý a začíná na 0px)
• sm (malý a začíná na 600px)
• md (střední a začíná na 900px)
• lg (velký a začíná na 1200px)
• xl (extra velký a začíná na 1536px)

Komponenta MUIgrid funguje stejným způsobem jako vlastnost CSS flexbox v tom, že má jednosměrný systém rodiče a potomka založený na dvou typech rozvržení – kontejner (nadřazený) a položky (podřízený). Komponenta mřížky MUI však usnadňuje vnořenou mřížku, kde položka může být také kontejner.

Prozkoumejte další možnosti stylingu pro aplikace ReactJS

Tento článek vás naučí, jak nainstalovat a používat knihovnu MUI ve vašich aplikacích React. Naučíte se používat některé základní komponenty (jako je typografie) a některé pokročilejší strukturální komponenty (jako je krabicová komponenta).

Knihovna MUI se snadno používá, je efektivní a skvěle funguje s aplikacemi React. Ale to neznamená, že je to jediná možnost stylingu, která je pro vývojáře Reactu k dispozici. Pokud vytváříte aplikaci React, můžete ke stylování aplikace použít knihovnu MUI nebo jakýkoli rámec CSS.

Kadeisha Kean (33 zveřejněných článků)

Kadeisha Kean je vývojář úplného softwaru a technický/technologický autor. Má výraznou schopnost zjednodušit některé z nejsložitějších technologických konceptů; vyrábí materiál, který může snadno pochopit každý technologický nováček. Je nadšená psaním, vývojem zajímavého softwaru a cestováním po světě (prostřednictvím dokumentů).

Více od Kadeishy Kean