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