Эти функции изменят способ работы с пользовательским интерфейсом материала.
Как фронтенд-инженер, Material-UI - мой любимый вариант стиля для компонентов React. Его гладкий дизайн и элегантность выделяли его среди остальных.
При этом я недавно обнаружил некоторые интересные факты о Material-UI, когда использовал его на практике. В этой статье я хочу представить их вам, поскольку они мне показались очень интересными.
Предварительное условие: знакомство с основами Material-UI будет полезно для полного понимания содержания этой статьи.
1. Автоматическая смена цвета
Независимо от того, создаете ли вы веб-сайт или мобильное приложение, темный режим имеет решающее значение для современных приложений. Вы же не захотите ослеплять пользователей белым экраном, когда они используют приложение в ночное время.
Реализовать темный режим с помощью пользовательского интерфейса материала очень просто, поскольку он поставляется с двумя палитрами для светлой и темной темы. Вы можете переключиться на темную тему, установив тип dark.
const darkTheme = createMuiTheme({
palette: {
type: 'dark',
},
}); Большинство из нас знают об этой функции. Некоторые из вас могут задаться вопросом, что в этом особенного?
Допустим, у вас есть кнопка с черным передним планом. В таком сценарии, если вы измените предпочтение темы приложения на темное, где цвет фона также будет черным по умолчанию, пользовательский интерфейс материала настраивает цвет кнопки так, чтобы он контрастировал с фоном.
Позвольте мне объяснить немного больше,
Если фон и цвет переднего плана элемента (например: кнопка) черные, пользовательский интерфейс материала соответствующим образом регулирует цвет переднего плана кнопки.
Удивительно, не правда ли?
Благодаря этой функции нам не нужно слишком беспокоиться о неконтрастных элементах в темном режиме в нашем приложении.
На заметку: эта автоматическая настройка не произойдет, если вы принудительно переопределите цвета кнопок.
2. Функциональная совместимость
Пользовательский интерфейс Material по своей сути предлагает систему стилей на основе JSS для стилизации ваших компонентов. Тем не мение,
Знаете ли вы, что пользовательский интерфейс материала можно комбинировать с механизмами стилизации, такими как простой CSS, глобальный CSS, стилизованные компоненты, модули CSS, эмоции и т. Д.?
Да, это возможно! Подробную информацию об этом вы можете найти здесь.
Чтобы дать вам обзор, Material UI не ограничивает вас только стилями на основе JSS. Если вам нравится использовать стилизованные компоненты или модули CSS, у вас есть свобода использовать их с пользовательским интерфейсом материала. На мой взгляд, такая гибкость очень важна для расширения использования библиотеки стилей.
Есть несколько вещей, о которых следует помнить, если вы комбинируете стили на основе JSS с пользовательским интерфейсом материала.
1. Контроль приоритета
JSS обычно вставляет стили в <head>. Чтобы убедиться, что ваш собственный стиль не будет переопределен, вам необходимо определить порядок внедрения CSS при использовании простых CSS, глобальных CSS, стилизованных компонентов, модулей CSS и т. Д.
Давайте посмотрим на пример того, как изменить порядок внедрения CSS, когда вы комбинируете стилизованные компоненты с пользовательским интерфейсом материала.
import { StylesProvider } from '@material-ui/core/styles';
<StylesProvider injectFirst>
{/* Your component tree.
Now, you can override Material-UI styles. */}
</StylesProvider>Другой метод переопределения стилей пользовательского интерфейса материала - использовать ключевое слово !important в ваших пользовательских стилях. Однако этот метод может выглядеть менее чистым, чем изменение порядка впрыска.
2. Порталы
Порталы позволяют отображать дочерние элементы в узле DOM, который существует вне иерархии DOM. Однако, если вы комбинируете UI материала со стилизованными компонентами, из-за ограничения стилей компонент, отображаемый через портал, не будет иметь надлежащего стиля.
Material UI также предлагает решение этой проблемы.
import React from 'react';
import styled from 'styled-components';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
const StyledMenu = styled(({ className, ...props }) => (
<Menu {...props} classes={{ paper: className }} />
))`
box-shadow: none;
border: 1px solid #d3d4d5;
li {
padding-top: 8px;
padding-bottom: 8px;
}
`;className необходимо передать в Menu, который отображается через Портал. Вы можете найти полную ссылку в документации Material UI.
3. Переключение между RTL и без RTL
Пользовательский интерфейс материала имеет возможность поддерживать языки RTL, такие как арабский, персидский и т. Д. Если вы какое-то время работали с пользовательским интерфейсом материала, вы, вероятно, знаете об этом.
Однако знаете ли вы, что переключение между RTL и Non-RTL с помощью Material UI очень просто?
Если вы хотите, чтобы определенный набор правил отказался от RTL, в то время как остальные используют RTL, вам просто нужно сделать следующее. (Источник: Документация по Material-UI)
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
marginTop: theme.spacing(4),
marginRight: theme.spacing(2),
},
affected: {
textAlign: 'right',
},
unaffected: {
flip: false,
textAlign: 'right',
},
}));
export default function RtlOptOut() {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.affected}>Affected</div>
<div className={classes.unaffected}>Unaffected</div>
</div>
);
}Когда все ваше приложение использует RTL, если вы хотите, чтобы один элемент был LTR, вам просто нужно использовать '
flip: false"для этого конкретного стиля.
4. Интеграция с конструкторскими наборами
В последних выпусках Material UI позволил поддерживать различные дизайнерские комплекты. Вот некоторые из них.
Они нацелены на достижение максимальной эффективности разработчика за счет интеграции этих дизайнерских комплектов с пользовательским интерфейсом материала.
Material UI пообещал сохранить паритет функций между этими инструментами.
Эти интеграции дизайнерских комплектов являются платной функцией Material UI. Однако для этого требуется только единовременный платеж. После покупки вы можете использовать его всю жизнь.
5. Не стилизованные компоненты
Нестилизованные компоненты с помощью Material UI - это новая функция, но, безусловно, стоит следить за ней.
Что такое компоненты без стиля?
Допустим, вам нужно иметь полностью настраиваемый дизайн в вашем приложении, но вам также нужны преимущества, предоставляемые Material UI. В этом случае переопределение всех стилей, предоставляемых пользовательским интерфейсом материала, будет обременительным, поскольку вам придется переопределить так много стилей.
Material UI предлагает решение этой проблемы в следующем выпуске, предоставляя компоненты Unstyled. Компоненты Unstyled весят 5,2 КБ в сжатом виде, в отличие от 26 КБ styled-components. Следовательно, это также улучшит размер вашего пакета, если вам потребуется полностью индивидуальный дизайн и тема.
Вы можете скачать Не стилизованный пакет Material UI с помощью следующей команды.
yarn add @material-ui/unstyled@next
Если вы хотите импортировать пакет Unstyled, используйте свою настраиваемую тему для всех компонентов, кроме нескольких, вы можете легко это сделать. Все, что вам нужно сделать, это использовать
styled()в компоненте Unstyled, чтобы применить стиль ядра пользовательского интерфейса материала к нескольким компонентам.
Это преобразует компонент без стиля в компонент со стилями, который находится в ядре пользовательского интерфейса материала. Однако это все еще альфа-версия. Если вам интересно узнать о предстоящих функциях Material UI, вы можете следить за этим пространством.
Резюме
В пользовательском интерфейсе материала есть много интересных функций, а также интересные будущие функции. Я нашел большинство этих функций очень полезными, особенно такие, как автоматическая смена цвета. Сообщите мне также о своем опыте работы с Material UI и любыми интересными фактами, которыми вы хотели бы поделиться с сообществом.
Спасибо за прочтение!
Создавайте отличные дизайнерские системы и микро-интерфейсы
Выведите фронтенд-разработку на новый уровень с помощью независимых компонентов. Создавайте и совместно работайте над приложениями на основе компонентов, чтобы легко разблокировать Micro Frontend и обмениваться компонентами.
Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания и компоновки независимых компонентов, а также создания в одиночку или вместе с вашей командой.
