#библиотека дня

Всем же знаком UI-kit, а нынче уже целая дизайн-система, MUI?

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

Эти ребята двигали идею CSS-in-JS чуть ли не с самого появления концепта. Сначала они использовали JSS, потом дикую смесь из JSS и Emotion, что приводило к, мягко говоря, мучениям.

По всей видимости, они сами наелись и решили перейти к созданию своего CSS-in-JS фреймворка, основанного на проекте WyW-in-JS
(на котором основан Linaria): Pigment CSS.

Как и многие современные альтернативы, стили Пигмента будут собираться в статичный CSS (с CSS-переменными), а API уже стандартно напоминает Styled Components:

const Button = styled('button')({
  border: 'none',
  padding: '0.75rem',
  // ...other base styles
  variants: [
    {
      props: (props) => props.variant !== 'contained',
      style: { backgroundColor: 'transparent' },
    },
  ],
});

Документация небольшая, но полна примеров. Плюс, учитывая распространённость MUI, у Pigment есть все шансы на распространение. Как минимум, насильно :)

Правда, мне кажется, что теперь мы получим три CSS-фреймворка в одном UI-ките одновременно...

#css #cssinjs #mui

#инструмент дня

Помните, как на Новый год нужно было срочно найти подарок для младшего брата, и вы отдали ему пылившийся на полке DVD с фильмом, который вы даже не смотрели?

Возможно, он до сих пор это помнит... А вы с тех пор понимаете, что такое повторное использование.

А вот ребята из Material UI aka MUI решили переработать подход к таким ситуациям.
Они только что выпустили публичную альфу Base UI 1.0 — библиотеку нестилизованных React-компонентов, выделенных из большого пакета Material UI и доступных теперь как отдельный продукт.

Помимо готовых компонентов в ней есть и низкоуровневые хуки, дающие всю мощь Material UI, но без необходимости реализовывать Material Design в приложении.

Полная свобода в стилях
Base UI не навязывает собственное решение для CSS. Вы сами выбираете, как работать: Tailwind, CSS-in-JS или любой другой способ.

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

Композиция
API компонентов открыто полностью. У вас есть доступ к каждому узлу, что позволяет легко добавлять, удалять или оборачивать элементы под свои нужды.

Base UI сохраняет лучшие части Material UI, не привязывая вас к "гугловскому" дизайну.

Вот это переиспользование, за которое не стыдно, котаны. Можно и младшему брату оставить.

Лучший подарок на Новый год!

#react #mui #ui #widgets