През септември 2021 г. компанията, известна преди като Material-UI, промени името си на MUI. Тази промяна се случи главно защото много хора не можеха да различат Material-UI от Material Design (система за проектиране).

MUI стартира като внедряване на Material Design, пригоден за React приложения. Днес марката се разширява и търси да създаде нова дизайнерска система, която да бъде алтернатива на Material Design.

Акронимът MUI означава Материал за изграждане на потребителски интерфейси и в тази статия ще научите как точно да използвате MUI за изграждане на потребителски интерфейси на React.

Как да получите достъп до MUI в React?

MUI се предлага като npm пакет. Следователно, всичко, което трябва да направите, за да получите достъп до него, е да изпълните следния ред код във вашия React проект:

npm инсталирайте @mui/material @emotion/react @emotion/styled

Ако приемем, че вече сте инсталиран React на вашето устройство, имате пълен достъп до библиотеката на MUI и всички нейни компоненти. MUI има над сто различни компоненти, които попадат в една от следните категории:

instagram viewer
  • Входове
  • Показване на данни
  • Обратна връзка
  • Повърхности
  • Навигация
  • Оформление
  • Utils
  • Решетка за данни
  • Време за среща

След като инсталирате MUI като npm пакет, използването на библиотеката във вашия проект е толкова просто, колкото импортирането на необходимия компонент в съответния файл и вмъкване на вашите предпочитания за стил на определени места навсякъде потребителския интерфейс.

Ако искате да създадете страница за вход за вашето приложение React, това са няколко компонента на MUI, които можете да използвате, които ще спестят време и ще ви помогнат да създадете изчистен дизайн.

Създаване на компонента за вход в React

За да създадете нов компонент в React, просто отидете до папката src на React и създайте нова папка с компоненти. Папката на компонентите може да бъде домът на всичките ви компоненти, като се започне от компонента за вход.

Свързано: Какво е ReactJS и за какво може да се използва?

Файлът Signin.js

импортиране на React от 'react';
функция Signin() {
връщане (

);
}
експортиране по подразбиране Вход;

След като създадете компонента си за вход, е време да го свържете с приложението си React, като го импортирате в компонента на приложението си (разположен в папката src).

Актуализираният файл App.js

импортиране на React от 'react';
импортиране на вход от './components/Signin';
функция App() {
връщане (







);
}
експортиране на приложение по подразбиране;

Сега можете да започнете да изследвате компонентите на MUI, които искате да използвате на страницата си за вход.

Какво представлява типографският компонент?

Типографският компонент принадлежи към категорията за показване на данни на MUI и има тринадесет варианта по подразбиране. Те включват:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • субтитри 1
  • субтитри 2
  • тяло 1
  • тяло 2
  • бутон
  • надпис
  • надпис

Вариантът, който изберете, трябва да зависи от текста, който искате да покажете. Например, ако искате да покажете заглавие, можете да използвате всеки от шестте варианта на заглавие във вашия потребителски интерфейс. Просто вмъкнете опцията за вариант и избраната стойност в компонента за типография.

Използване на примера за типографски компонент

импортиране на React от 'react';
импортирайте типография от '@mui/material/Typography';
функция Signin() {
връщане (


 Впиши се 




);
}
експортиране по подразбиране Вход;

Важен извод от кода по-горе е, че всеки път, когато вмъквате нов компонент в потребителския си интерфейс, ще трябва също да го импортирате в горната част на вашия React компонентен файл. Актуализирането на вашия компонент за вход с компонента за типография (както се вижда в кода по-горе) ще доведе до следния изход във вашия браузър:

Какво представлява компонентът на текстовото поле?

Компонентът на текстовото поле принадлежи към категорията за въвеждане. Този компонент има две прости функции; позволява на потребителите да въвеждат или редактират текста в потребителски интерфейс. Компонентът на текстовото поле използва три варианта, а именно очертан, запълнен и стандартен, като очертаният вариант е по подразбиране. Следователно, ако искате да използвате компонента на текстовото поле по подразбиране, не е необходимо да включвате опцията за вариант. Компонентът на текстовото поле също използва няколко други реквизити, включително етикет, задължителен, тип, идентификатор, деактивиран и т.н.

Използване на примера за компонент на текстово поле

импортиране на React от 'react';
импортирайте TextField от '@mui/material/TextField';
импортирайте типография от '@mui/material/Typography';
функция Signin() {
връщане (


 Впиши се 
label="Имейл адрес"
задължително
id="имейл"
име = "имейл"
/>
етикет = "Парола"
задължително
id="парола"
име = "парола"
type="password"
/>




);
}
експортиране по подразбиране Вход;

Кодът по-горе ще произведе следния изход във вашия браузър:

Както подсказва името, компонентът на връзката функционира по същия начин като обикновена CSS връзка. Той попада в категорията за навигация и има традиционните href и целеви реквизити. Освен това има цвят, вариант и подчертаване.

Свързано: Как да използвате реквизити в ReactJS

Въпреки това, няма нужда да използвате допълнителни реквизити, освен ако не искате връзката ви да изглежда уникална. Например стойността по подразбиране на подчертаната опора е „винаги“, а другите две стойности, които можете да зададете на опорния елемент, са „none“ и „hover“.

Следователно, трябва да включите опорния елемент за подчертаване във вашия компонент само когато не искате подчертаване или когато искате той да има състояние на задържане на курсора.

Забравена парола?

Вмъкването на кода по-горе във вашия съществуващ компонент за вход ще доведе до следния изход във вашия браузър:

Какво представлява компонентът на бутона?

Компонентът на бутона също принадлежи към категорията за въвеждане и се придържа към общата функционалност на бутона, той съобщава действията на потребителя на вашето приложение. Този компонент използва един от трите варианта (текст, съдържащ и контур) и всеки вариант може да се появи в едно от трите състояния – първично, деактивирано и свързано.

Вариантът по подразбиране на компонент на бутона е текст. Ето защо, ако искате контейнер или очертан бутон, ще трябва да използвате опцията за вариант, за да посочите това. В допълнение към опцията за вариант, компонентът на бутона също има манипулатор за onclick и цветен реквизит - наред с други.

Използване на примера за компонент на бутона


Вмъкването на кода по-горе във вашия компонент за вход ще актуализира вашия потребителски интерфейс, за да изглежда по следния начин:

Сега имате интерактивен бутон, който се завърта, когато мишката минава върху него. Но всички компоненти са хоризонтални и не изглежда страхотно.

Какво представлява компонентът на кутията?

Theboxcomponent е точно това, от което се нуждаете, за да организирате помощни компоненти (като бутонния компонент) във вашето приложение React. Компонентът кутия използва ansx prop, който има достъп до всички системни свойства (като височина и ширина), които са ви необходими, за да организирате компонентите във вашия потребителски интерфейс.

Използване на примера за компонент Box

импортиране на React от 'react';
импортирайте връзка от '@mui/material/Link';
импортирайте TextField от '@mui/material/TextField';
импортирайте типография от '@mui/material/Typography';
импортирайте { Button, Box } от '@mui/material';
функция Signin() {
връщане (


sx={{
моите: 8,
дисплей: 'flex',
flexDirection: 'колона',
alignItems: 'center',
}}>
 Впиши се 
label="Имейл адрес"
задължително
id="имейл"
име = "имейл"
margin="normal"
/>
етикет = "Парола"
задължително
id="парола"
име = "парола"
type="password"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
Забравена парола?

вариант = "съдържа"
sx={{mt: 2}}
>
Впиши се






);
}
експортиране по подразбиране Вход;

Като обвиете компонента box около компонентите на помощната програма (и използвате sx prop) в кода по-горе, вие ефективно ще създадете структура на гъвкава колона. Кодът по-горе ще създаде следната страница за вход в React във вашия браузър:

Какво е MUI Grid Component?

Компонентът на мрежата е друг полезен MUI компонент за научаване. Той попада в категорията на оформлението на MUI и улеснява отзивчивостта. Той позволява на разработчика да постигне отзивчив дизайн поради своята система за оформление с 12 колони. Тази система за оформление използва петте точки на прекъсване по подразбиране на MUI за създаване на приложения, които се адаптират към всеки размер на екрана. Тези точки на прекъсване включват:

  • xs (изключително малък и започва от 0px)
  • см (малък и започва от 600px)
  • md (средно и започва от 900px)
  • lg (голям и започва от 1200px)
  • xl (изключително голям и започва от 1536px)

Компонентът MUIgrid работи по същия начин като свойството на CSS flexbox, тъй като има еднопосочна система родител-дъще, базирана на два типа оформления – контейнер (родител) и елементи (дъще). Компонентът MUI grid обаче улеснява вложена мрежа, където елемент може да бъде и контейнер.

Разгледайте други опции за стил за приложения ReactJS

Тази статия ви учи как да инсталирате и използвате MUI библиотеката във вашите React приложения. Научавате се как да използвате някои основни компоненти (като типография) и някои от по-модерните структурни компоненти (като компонента кутия).

MUI библиотеката е лесна за използване, ефективна и работи чудесно с приложенията React. Но това не означава, че това е единствената опция за стил, налична за разработчиците на React. Ако създавате React приложение, можете да използвате библиотеката на MUI или всяка CSS рамка, за да стилизирате приложението си.

Tailwind CSS vs. Bootstrap: Коя е по-добра рамка?

При избора на CSS рамка е важно да намерите тази, която отговаря на вашите изисквания.

Прочетете Следващото

ДялTweetелектронна поща
Свързани теми
  • Програмиране
  • Програмиране
  • Уроци по кодиране
За автора
Кадейша Кийн (33 публикувани статии)

Kadeisha Kean е разработчик на софтуер с пълен стек и писател по технически/технологии. Тя има отчетливата способност да опростява някои от най-сложните технологични концепции; производство на материал, който може лесно да бъде разбран от всеки начинаещ в технологиите. Тя е страстна да пише, разработва интересен софтуер и да пътува по света (чрез документални филми).

Още от Kadeisha Kean

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, ревюта, безплатни електронни книги и ексклузивни оферти!

Щракнете тук, за да се абонирате