Тези функции ще променят начина, по който работите с Material UI
Като фронтенд инженер, Material-UI е любимата ми опция за стил за React Components. Неговият елегантен дизайн и елегантност го отличаваха от останалите.
Като се има предвид това, наскоро открих някои интересни факти за Material-UI, докато го използвах на практика. В тази статия искам да ги представя във вашата светлина, тъй като ги намирам за много интересни.
Предварително условие: Познаването на основите на Material-UI ще бъде от полза за пълното разбиране на съдържанието на тази статия.
1. Автоматични промени в цвета
Независимо дали създавате уебсайт или мобилно приложение, наличието на тъмен режим е от решаващо значение за съвременните приложения. Не бихте искали да заслепите потребителите с бял екран, когато използват приложението през нощта.
Прилагането на тъмен режим с Material UI е много лесно, тъй като идва с две палитри за светла и тъмна тема. Можете да превключите към тъмната тема, като зададете типа на dark.
const darkTheme = createMuiTheme({
palette: {
type: 'dark',
},
}); Повечето от нас са наясно с тази функция. Така че някои от вас може да се чудят какво е толкова специалното в него?
Да приемем, че имате бутон с черен преден план. В сценарий като такъв, ако промените предпочитанието за тема на приложението на тъмно, където цветът на фона също ще бъде черен по подразбиране, Material UI коригира цвета на бутона, така че да контрастира с фона.
Нека обясня малко повече,
Ако фонът и цветът на преден план на даден елемент (напр.: Бутон) са черни, Material UI коригира съответно цвета на предния план на бутона.
Удивително, нали?
Поради тази функция не е нужно да се тревожим твърде много за неконтрастни елементи в тъмния режим в нашето приложение.
Забележка: Тази автоматична настройка няма да се случи, ако принудително замените цветовете на бутоните.
2. Оперативна съвместимост
Material UI по своята същност предлага система за стилизиране, базирана на JSS, за стилизиране на вашите компоненти. Въпреки това,
Знаете ли, че Material UI може да се комбинира с механизми за стилизиране като Plain CSS, Global CSS, Styled-Components, CSS modules, Emotion и др.?
Да, възможно е! Можете да намерите подробна информация за това тук.
Само за да ви дам общ преглед, Material UI не ви ограничава само до JSS базиран стил. Ако обичате да използвате Styled-Components или CSS модули, имате свободата да ги използвате с Material UI. По мое мнение този вид гъвкавост е много важен за разширяване на използването на библиотека за стилизиране.
Има няколко неща, които трябва да имате предвид, ако комбинирате базиран на JSS стил с Material UI.
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. Въпреки това, ако комбинирате Material 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 и Non-RTL
Material UI има способността да поддържа RTL езици като арабски, персийски и др. Ако сте работили с Material UI от известно време, вероятно сте наясно с това.
Знаете ли обаче, че превключването между 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 активира поддръжка за различни дизайнерски комплекти. Някои от тях са както следва.
- Фигма
- "Скица"
- Adobe XD
Те се стремят да постигнат максимална ефективност на разработчиците чрез интегрирането на тези дизайнерски комплекти с Material UI.
Material UI обеща да запази паритета на функциите между тези инструменти.
Тези интеграции на дизайнерски комплекти са платена функция на Material UI. Това обаче изисква само еднократно плащане. Веднъж закупен, можете да го използвате цял живот.
5. Нестилизирани компоненти
Компонентите без стил от Material UI са предстояща функция, но определено си струва да се следи.
Какво представляват нестилизираните компоненти?
Да приемем, че трябва да имате напълно персонализиран дизайн във вашето приложение, но се нуждаете и от предимствата, предоставени от Material UI. В този случай замяната на всички стилове, предоставени от Material UI, ще бъде тромава, тъй като ще трябва да замените толкова много стилове.
Material UI предоставя решение за това в предстояща версия чрез предоставяне на нестилизирани компоненти. Нестилизираните компоненти тежат 5,2 KB gzipped за разлика от 26 KB стилизирани компоненти. Следователно, това също ще бъде подобрение на размера на вашия пакет, ако имате нужда от напълно персонализиран дизайн и тема.
Можете да изтеглите Нестилизиран пакет от материален потребителски интерфейс чрез следната команда.
yarn add @material-ui/unstyled@next
Ако искате да импортирате пакета Unstyled, използвайте вашата персонализирана тема за всички компоненти, с изключение на няколко, можете лесно да направите това. Всичко, което трябва да направите, е да използвате
styled()на вашия Unstyled компонент, за да приложите основния стил на Material UI върху няколкото компонента.
Това ще преобразува Unstyled компонента в styled компонент, който е в ядрото на Material UI. Това обаче все още е в алфа версията. Ако се интересувате от предстоящите функции на Material UI, можете да следвате това „пространство“.
Резюме
Material UI има много страхотни функции, както и интересни предстоящи функции. Намерих повечето от тези функции за много полезни, особено функции като автоматични промени на цвета. Кажете ми вашия опит с Material UI и всички интересни факти, които бихте искали да споделите с общността.
Благодаря за четенето!
Изградете страхотни дизайнерски системи и микро интерфейси
Изведете разработката на интерфейса на следващото ниво с независими компоненти. Изграждайте и си сътрудничете върху приложения, управлявани от компоненти, за лесно отключване на Micro Frontend и за споделяне на компоненти.
OSS инструменти като Bit предлагат страхотно изживяване за разработка за изграждане и композиране на независими компоненти и изграждане самостоятелно или заедно с вашия екип.
