Что такое MUI и как его использовать в проектах ReactJS?

В сентябре 2021 года компания, ранее известная как Material-UI, сменила название на MUI. Это изменение произошло главным образом потому, что многие люди не могли отличить Material-UI от Material Design (дизайн-системы).

MUI начинался как реализация Material Design, адаптированная для приложений React. Сегодня бренд расширяется и стремится создать новую систему дизайна, которая станет альтернативой Material Design.

Аббревиатура MUI означает Материал для создания пользовательского интерфейса, и в этой статье вы узнаете, как именно использовать MUI для создания пользовательского интерфейса React.

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

MUI доступен в виде пакета npm. Поэтому все, что вам нужно сделать для доступа к нему, - это выполнить следующую строку кода в вашем проекте React:

npm install @ mui / material @ эмоция / реакция @ эмоция / стиль

Предполагая, что вы уже установлен React на вашем устройстве, у вас есть полный доступ к библиотеке MUI и всем ее компонентам. MUI имеет более сотни различных компонентов, которые попадают в одну из следующих категорий:

• Входы
• Отображение данных
• Обратная связь
• Поверхности
• Навигация
• Макет
• Утилиты
• Сетка данных
• Дата / время

После установки MUI как пакета npm использовать библиотеку в вашем проекте так же просто, как импортировать необходимый компонент в соответствующий файл и вставка ваших предпочтений стиля в определенные места повсюду пользовательский интерфейс.

Если вы хотите создать страницу входа для своего приложения React, вы можете использовать несколько компонентов MUI, которые сэкономят время и помогут создать чистый дизайн.

Создание компонента входа в систему React

Чтобы создать новый компонент в React, просто перейдите в папку src React и создайте новую папку компонента. Папка компонентов может быть домом для всех ваших компонентов, начиная с компонента входа.

Связанный: Что такое ReactJS и для чего его можно использовать?

Файл Signin.js

импортировать React из React;
function Signin () {
возвращение (

);
}
экспортировать вход по умолчанию;

После создания компонента входа пора связать его с приложением React, импортировав его в компонент приложения (расположенный в папке src).

Обновленный файл App.js

импортировать React из React;
импортировать вход из './components/Signin';
function App () {
возвращение (






);
}
экспортировать приложение по умолчанию;

Теперь вы можете приступить к изучению компонентов многоязыкового интерфейса пользователя, которые хотите использовать на странице входа.

Что такое компонент типографики?

Компонент типографики относится к категории отображения данных MUI и имеет тринадцать вариантов по умолчанию. Это включает:

• h1
• h2
• h3
• h4
• h5
• h6
• subtitle1
• subtitle2
• body1
• body2
• кнопка
• подпись
• надчеркнуть

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

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

импортировать React из React;
импортировать типографику из '@ mui / material / Typography';
function Signin () {
возвращение (


 Войти 



);
}
экспортировать вход по умолчанию;

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

Что такое компонент текстового поля?

Компонент текстового поля относится к категории ввода. Этот компонент выполняет две простые функции; он позволяет пользователям вводить или редактировать текст в пользовательском интерфейсе. Компонент текстового поля использует три варианта: выделенный, заполненный и стандартный, причем выделенный вариант является вариантом по умолчанию. Поэтому, если вы хотите использовать компонент текстового поля по умолчанию, вам не нужно включать вариант prop. Компонент текстового поля также использует несколько других свойств, включая label, required, type, id, disabled и т. Д.

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

импортировать React из React;
импортировать TextField из '@ mui / material / TextField';
импортировать типографику из '@ mui / material / Typography';
function Signin () {
возвращение (


 Войти 
label = "Адрес электронной почты"
требуется
id = "электронная почта"
name = "электронная почта"
/>
label = "Пароль"
требуется
id = "пароль"
name = "пароль"
type = "пароль"
/>



);
}
экспортировать вход по умолчанию;

Приведенный выше код выдаст в вашем браузере следующий результат:

Как следует из названия, компонент ссылки работает так же, как и обычная ссылка CSS. Он относится к категории навигации и имеет традиционные реквизиты href и target. Кроме того, у него есть цвет, вариант и опора подчеркивания.

Связанный: Как использовать Props в ReactJS

Однако нет необходимости использовать какие-либо дополнительные реквизиты, если вы не хотите, чтобы ваша ссылка выглядела уникальной. Например, значение по умолчанию для свойства подчеркивания - «всегда», а два других значения, которые вы можете назначить для свойства, - «нет» и «при наведении курсора».

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

забыть пароль?

Вставка приведенного выше кода в существующий компонент входа приведет к следующему выводу в вашем браузере:

Что такое компонент кнопки?

Компонент кнопки также относится к категории ввода и соответствует общей функциональности кнопок: он передает действия пользователя вашему приложению. Этот компонент использует один из трех вариантов (текст, содержание и структура), и каждый вариант может отображаться в одном из трех состояний: первичном, отключенном и связанном.

Вариант по умолчанию для компонента кнопки - текст. Следовательно, если вам нужна содержащаяся или выделенная кнопка, вам нужно будет использовать опцию варианта, чтобы указать это. В дополнение к варианту опоры компонент кнопки также имеет обработчик onclick и опору цвета, среди прочего.

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

 Войти

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

Теперь у вас есть интерактивная кнопка, которая зависает при наведении на нее мыши. Но все компоненты расположены горизонтально, и выглядит не очень хорошо.

Что такое компонент коробки?

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

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

импортировать React из React;
импортировать ссылку из '@ mui / material / Link';
импортировать TextField из '@ mui / material / TextField';
импортировать типографику из '@ mui / material / Typography';
импортировать {Button, Box} из '@ mui / material';
function Signin () {
возвращение (


sx = {{
мой: 8,
дисплей: 'гибкий',
flexDirection: 'столбец',
alignItems: 'центр',
}}>
 Войти 
label = "Адрес электронной почты"
требуется
id = "электронная почта"
name = "электронная почта"
маржа = "нормальный"
/>
label = "Пароль"
требуется
id = "пароль"
name = "пароль"
type = "пароль"
маржа = "нормальный"
/>
href = "#"
sx = {{mr: 12, mb: 2}}
>
забыть пароль?

вариант = "содержится"
sx = {{mt: 2}}
>
Войти





);
}
экспортировать вход по умолчанию;

Обернув boxcomponent вокруг компонентов утилит (и используя опору sx) в приведенном выше коде, вы эффективно создадите структуру гибких столбцов. Приведенный выше код создаст в вашем браузере следующую страницу входа в React:

Что такое компонент MUI Grid?

Компонент сетки - еще один полезный компонент MUI, который нужно изучить. Он попадает в категорию макетов MUI и способствует быстрому реагированию. Это позволяет разработчику создавать адаптивный дизайн благодаря системе макета из 12 столбцов. Эта система компоновки использует пять контрольных точек MUI по умолчанию для создания приложений, которые адаптируются к любому размеру экрана. Эти точки останова включают:

• хз (очень маленький и начинается с 0 пикселей)
• см (маленький и начинается с 600 пикселей)
• мкр (средний, начинается с 900 пикселей)
• LG (большой, начинается с 1200 пикселей)
• xl (очень большой, начинается с 1536 пикселей)

Компонент MUIgrid работает так же, как свойство CSS flexbox, поскольку он имеет однонаправленную родительско-дочернюю систему, основанную на двух типах макетов - контейнер (родительский) и элементы (дочерний). Однако компонент сетки MUI упрощает создание вложенной сетки, где элемент также может быть контейнером.

Изучите другие варианты стилей для приложений ReactJS

В этой статье рассказывается, как установить и использовать библиотеку MUI в ваших приложениях React. Вы узнаете, как использовать некоторые базовые компоненты (например, типографику) и некоторые более сложные структурные компоненты (например, компонент коробки).

Библиотека MUI проста в использовании, эффективна и отлично работает с приложениями React. Но это не значит, что это единственный вариант стиля, доступный разработчикам на React. Если вы создаете приложение React, вы можете использовать библиотеку MUI или любую структуру CSS для стилизации своего приложения.

Кадейша Кин (Опубликовано 33 статей)

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

Ещё от Kadeisha Kean