Представляем стильные компоненты
Stylish components - это легкая альтернатива styled-components с теми же основными функциями и функциями при 1/10 размера.
Как это работает?
Как уже упоминалось во вступлении, стильный работает так же, как и стилизованные компоненты, поэтому вы просто создаете компонент, используя stylish.<html tag>`/*some css*/` css следует стандартному синтаксису css с некоторыми небольшими вариациями, например & в качестве заполнителя для хэша класса, который получит компонент.
Насколько он крошечный?
Я заменил стилизованные компоненты на моем личном веб-сайте (http://jasperdemoor.me) на стильные компоненты, и это изменило размер пакета JavaScript с 185.89kB на 139.80kB, что мне кажется очень важным. (включая минификацию и другие оптимизации сборки)
Я также добавил компонентов стиля и стиля друг под друга в код Visual Studio, который сообщает о размерах файлов импорта ...
Как уже упоминалось ранее, он составляет 1/10 от размера стилизованных компонентов.
Так что же он может делать?
Что ж, функциональность довольно ограничена по сравнению со стилями-компонентами, и на самом деле это не простая замена. Это может быть до тех пор, пока вы используете только стили и CSS. Вы можете просто настроить для этого псевдоним.
Использование событий CSS
Вы можете использовать & для событий css, это в основном заменяется именем класса, которое получит компонент.
Он может обрабатывать медиа-запросы
Стильные компоненты могут обрабатывать медиа-запросы так же, как стилизованные компоненты.
Вы можете расширить компоненты
Если вы хотите расширить компонент, вы можете! Вы также можете цеплять столько, сколько хотите.
Вы можете использовать реквизит и все модные строки шаблонов функций, которые могут предложить
По моему личному мнению, основной причиной использования css-in-js является возможность фактически использовать функции и свойства JavaScript в ваших стильных компонентах, поэтому стильные компоненты поддерживают как свойства, так и стандартный синтаксис строк шаблона.
Получите это сейчас, используя npm (или пряжу)!
Спасибо за чтение!
