Material-UI теперь MUI!
Material-UI только что выпустил версию 5!
Давайте взглянем на некоторые изменения, которые меня больше всего волнуют.
Я не буду описывать все изменения в этой статье, поэтому обязательно ознакомьтесь с их выпуском, чтобы узнать больше.
Material-UI теперь MUI!
Первое, что вы заметите, - это ребрендинг. Material-UI теперь MUI! Вы можете прочитать больше об этом здесь". С этим ребрендингом появилось новое доменное имя https://mui.com/, обновленный веб-сайт и страница документации, а также новый логотип.
The sx
prop
Опора sx
- это ярлык для определения пользовательских стилей. Он предоставляет расширенный набор CSS API, поэтому вы можете указать любой допустимый CSS. У вас также будет доступ к теме. Самое приятное то, что опора sx
доступна для всех компонентов.
Ниже приведен пример из их документации.
Чтобы сделать вещи еще лучше, четыре компонента предоставляют подмножество свойства sx
в виде плоских свойств: Box, Grid, Typography и Stack.
<Typography color="grey.600">
// is equivalent to
<Typography sx={{ color: 'grey.600' }}>
Динамический реквизит
Теперь вы можете добавлять новые цвета внутри и вне темы цветовой палитры.
Теперь я могу использовать кнопку и добавить нейтральный цвет.
<ThemeProvider theme={theme}>
<Button color="neutral" variant="contained">
neutral
</Button>
</ThemeProvider>
Вы также можете добавлять собственные варианты к компонентам.
Теперь я могу использовать кнопку с пунктирным вариантом. Текст не будет преобразован в верхний регистр по умолчанию, а рамка будет синей пунктирной линией.
<ThemeProvider theme={theme}>
<Button variant="dashed" sx={{ m: 1 }}>
Dashed
</Button>
</ThemeProvider>
Описание реквизита в IntelliSense
Все описания свойств перенесены в TypeScript. Таким образом, IntelliSense может показать вам документацию в текстовом редакторе.
Поддержка строгого режима
При использовании Material-UI версии 4 с React.StrictMode
вы часто будете видеть предупреждения. Подробнее об этом можно прочитать здесь.
В этом выпуске эти предупреждения должны быть исправлены.
Новые компоненты
- Сетка (Улучшено)
- Стек (Новый)
- Автозаполнение (из лаборатории)
- Пагинация (Из лаборатории)
- Рейтинг (Из лаборатории)
- Скелет (Из лаборатории)
- Быстрый набор (из лаборатории)
- Кнопка переключения (из лаборатории)
Заключение
Поздравляем команду MUI с выходом этого релиза! Он выглядит великолепно, и я очень рад попробовать некоторые из новых функций.
Спасибо за прочтение! Обязательно посетите сайт MUI и релиз, чтобы узнать больше.
Больше контента на plainenglish.io