Co to jest MUI i jak można go wykorzystać w projektach ReactJS?

We wrześniu 2021 roku firma znana wcześniej jako Material-UI zmieniła nazwę na MUI. Ta zmiana nastąpiła głównie dlatego, że wiele osób nie potrafiło odróżnić Material-UI od Material Design (system projektowania).

MUI rozpoczęło się jako implementacja Material Design dostosowana do aplikacji React. Dziś marka rozwija się i poszukuje nowego systemu projektowania, który będzie alternatywą dla Material Design.

Skrót MUI oznacza materiał do tworzenia interfejsów użytkownika, a z tego artykułu dowiesz się dokładnie, jak używać MUI do tworzenia interfejsów użytkownika React.

Jak uzyskać dostęp do MUI w React?

MUI jest dostępny jako pakiet npm. Dlatego wszystko, co musisz zrobić, aby uzyskać do niego dostęp, to wykonać następujący wiersz kodu w swoim projekcie React:

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

Zakładając, że już zainstalowany React na twoim urządzeniu, masz pełny dostęp do biblioteki MUI i wszystkich jej komponentów. MUI ma ponad sto różnych komponentów, które należą do jednej z następujących kategorii:

• Wejścia
• Wyświetlanie danych
• Sprzężenie zwrotne
• Powierzchnie
• Nawigacja
• Układ
• Narzędzia
• Siatka danych
• Data/godzina

Po zainstalowaniu MUI jako pakietu npm korzystanie z biblioteki w projekcie jest tak proste, jak importowanie wymagany składnik w odpowiednim pliku i wstawianie preferencji stylizacji w określonych miejscach w całym tekście interfejs użytkownika.

Jeśli chcesz utworzyć stronę logowania do swojej aplikacji React, możesz skorzystać z kilku komponentów MUI, które oszczędzą czas i pomogą stworzyć przejrzysty projekt.

Tworzenie komponentu logowania React

Aby utworzyć nowy komponent w React, po prostu przejdź do folderu src Reacta i utwórz nowy folder komponentów. Folder komponentu może być domem dla wszystkich komponentów, począwszy od komponentu logowania.

Związane z: Co to jest ReactJS i do czego można go wykorzystać?

Plik Signin.js

importuj React z „react”;
funkcja Signin() {
powrót (

);
}
eksportuj domyślny login;

Po utworzeniu komponentu logowania nadszedł czas, aby połączyć go z aplikacją React poprzez zaimportowanie go do komponentu aplikacji (znajdującego się w folderze src).

Zaktualizowany plik App.js

importuj React z „react”;
importuj logowanie z './components/Signin';
funkcja App() {
powrót (






);
}
eksportuj domyślną aplikację;

Teraz możesz rozpocząć eksplorację składników MUI, których chcesz używać na swojej stronie logowania.

Co to jest składnik typografii?

Komponent typografii należy do kategorii wyświetlania danych MUI i ma trzynaście domyślnych wariantów. Obejmują one:

• h1
• h2
• h3
• h4
• h5
• h6
• podtytuł1
• podtytuł2
• ciało1
• ciało2
• przycisk
• podpis
• nadpisać

Wybrany wariant powinien zależeć od tekstu, który chcesz wyświetlić. Na przykład, jeśli chcesz wyświetlić nagłówek, możesz użyć dowolnego z sześciu wariantów nagłówka w swoim interfejsie użytkownika. Wystarczy wstawić wariant prop i wybraną wartość w komponencie typografii.

Korzystanie z przykładu komponentu typograficznego

importuj React z „react”;
importuj typografię z „@mui/material/Typography”;
funkcja Signin() {
powrót (


 Zaloguj 



);
}
eksportuj domyślny login;

Ważnym wnioskiem z powyższego kodu jest to, że za każdym razem, gdy wstawiasz nowy komponent do interfejsu użytkownika, musisz go również zaimportować na górze pliku komponentu React. Zaktualizowanie komponentu logowania za pomocą komponentu typografia (jak widać w powyższym kodzie) spowoduje wyświetlenie w przeglądarce następujących danych wyjściowych:

Co to jest składnik pola tekstowego?

Komponent pola tekstowego należy do kategorii wejściowej. Ten składnik ma dwie proste funkcje; pozwala użytkownikom wprowadzać lub edytować tekst w interfejsie użytkownika. Komponent pola tekstowego wykorzystuje trzy warianty, a mianowicie konturowy, wypełniony i standardowy, przy czym wariant konturowy jest wariantem domyślnym. Dlatego, jeśli chcesz użyć domyślnego komponentu pola tekstowego, nie musisz dołączać wariantu właściwości. Komponent pola tekstowego wykorzystuje również kilka innych właściwości, w tym etykietę, wymagany, typ, identyfikator, wyłączony itp.

Korzystanie z przykładu komponentu pola tekstowego

importuj React z „react”;
importuj TextField z „@mui/material/TextField”;
importuj typografię z „@mui/material/Typography”;
funkcja Signin() {
powrót (


 Zaloguj 
label="Adres e-mail"
wymagany
id="e-mail"
name="e-mail"
/>
label="Hasło"
wymagany
id="hasło"
name="hasło"
type="hasło"
/>



);
}
eksportuj domyślny login;

Powyższy kod wygeneruje w Twojej przeglądarce następujące dane wyjściowe:

Jak sama nazwa wskazuje, komponent linku działa w taki sam sposób, jak zwykły link CSS. Należy do kategorii nawigacji i ma tradycyjne atrybuty href i target. Dodatkowo posiada kolor, wariant i podkreślenie rekwizytu.

Związane z: Jak używać rekwizytów w ReactJS

Nie ma jednak potrzeby używania dodatkowych rekwizytów, chyba że chcesz, aby Twój link wyglądał wyjątkowo. Na przykład domyślną wartością właściwości podkreślenia jest „zawsze”, a pozostałe dwie wartości, które można przypisać do właściwości, to „brak” i „najechanie”.

Dlatego wystarczy włączyć podkreślenie do swojego komponentu tylko wtedy, gdy nie chcesz podkreślać lub gdy chcesz, aby był w stanie najechania.

zapomniałeś hasła?

Wstawienie powyższego kodu do istniejącego komponentu logowania spowoduje wyświetlenie w przeglądarce następujących danych wyjściowych:

Co to jest składnik przycisku?

Komponent przycisku należy również do kategorii danych wejściowych i jest zgodny z ogólną funkcjonalnością przycisku, komunikując działania użytkownika do aplikacji. Ten składnik wykorzystuje jeden z trzech wariantów (tekst, zawartość i konspekt), a każdy wariant może pojawić się w jednym z trzech stanów — podstawowym, wyłączonym i połączonym.

Domyślnym wariantem komponentu przycisku jest tekst. Dlatego, jeśli chcesz mieć przycisk z konturem zawartym, musisz użyć wariantu właściwości, aby to wskazać. Oprócz wariantu rekwizytu komponent przycisku ma również obsługę onclick i rekwizyt koloru — między innymi.

Korzystanie z przykładowego komponentu przycisku

 Zaloguj

Wstawienie powyższego kodu do komponentu logowania spowoduje zaktualizowanie interfejsu użytkownika, tak aby wyglądał następująco:

Teraz masz interaktywny przycisk, który unosi się, gdy najeżdża na niego mysz. Ale wszystkie elementy są poziome i nie wygląda to zbyt dobrze.

Co to jest składnik pudełka?

Theboxcomponent jest dokładnie tym, czego potrzebujesz do organizowania komponentów narzędziowych (takich jak komponent przycisku) w aplikacji React. Komponent box używa właściwości ansx, która ma dostęp do wszystkich właściwości systemu (takich jak wysokość i szerokość), które są potrzebne do zorganizowania komponentów w interfejsie użytkownika.

Korzystanie z przykładowego komponentu pudełka

importuj React z „react”;
importuj link z „@mui/material/Link”;
importuj TextField z „@mui/material/TextField”;
importuj typografię z „@mui/material/Typography”;
importuj { Button, Box } z „@mui/material”;
funkcja Signin() {
powrót (


sx={{
mój: 8,
wyświetlacz: 'flex',
flexDirection: 'kolumna',
alignItems: 'centrum',
}}>
 Zaloguj 
label="Adres e-mail"
wymagany
id="e-mail"
name="e-mail"
margines="normalny"
/>
label="Hasło"
wymagany
id="hasło"
name="hasło"
type="hasło"
margines="normalny"
/>
href="#"
sx={{pan: 12, mb: 2}}
>
zapomniałeś hasła?

wariant="zawiera"
sx={{mt: 2}}
>
Zaloguj





);
}
eksportuj domyślny login;

Owijając boxcomponent wokół komponentów narzędziowych (i używając właściwości sx) w powyższym kodzie, skutecznie stworzysz elastyczną strukturę kolumnową. Powyższy kod spowoduje wyświetlenie w przeglądarce następującej strony logowania React:

Co to jest składnik siatki MUI?

Komponent siatki jest kolejnym przydatnym komponentem MUI do nauki. Należy do kategorii układu MUI i ułatwia responsywność. Pozwala programiście osiągnąć responsywny projekt dzięki 12-kolumnowemu systemowi układu. Ten system układu wykorzystuje pięć domyślnych punktów przerwania MUI do tworzenia aplikacji, które dostosowują się do dowolnego rozmiaru ekranu. Te punkty przerwania obejmują:

• xs (bardzo mały i zaczyna się od 0px)
• sm (mały i zaczyna się od 600px)
• md (średni i zaczyna się od 900px)
• LG (duży i zaczyna się od 1200px)
• xl (bardzo duży i zaczyna się od 1536px)

Komponent MUIgrid działa tak samo jak właściwość CSS flexbox, ponieważ ma jednokierunkowy system rodzic-dziecko oparty na dwóch typach układów — kontenerze (rodzic) i elementach (dziecko). Jednak składnik siatki MUI ułatwia tworzenie siatki zagnieżdżonej, w której element może być również kontenerem.

Poznaj inne opcje stylizacji dla aplikacji ReactJS

Z tego artykułu dowiesz się, jak zainstalować i używać biblioteki MUI w aplikacjach React. Dowiesz się, jak korzystać z podstawowych elementów (takich jak typografia) i niektórych bardziej zaawansowanych elementów konstrukcyjnych (takich jak element pudełkowy).

Biblioteka MUI jest łatwa w użyciu, efektywna i świetnie współpracuje z aplikacjami React. Ale to nie znaczy, że jest to jedyna opcja stylizacji dostępna dla programistów React. Jeśli tworzysz aplikację React, możesz użyć biblioteki MUI lub dowolnego frameworka CSS, aby nadać styl swojej aplikacji.

Kadeisha Kean (33 opublikowane artykuły)

Kadeisha Kean jest programistą zajmującym się pełnymi stosami oprogramowania i pisarzem technicznym/technologicznym. Ma wyraźną umiejętność upraszczania niektórych z najbardziej złożonych koncepcji technologicznych; produkcja materiału, który może być łatwo zrozumiały dla każdego nowicjusza w dziedzinie technologii. Pasjonuje się pisaniem, tworzeniem ciekawego oprogramowania i podróżowaniem po świecie (poprzez filmy dokumentalne).

Więcej od Kadeishy Kean