Styled Vanilla Extract

Styled-vanilla-extract - это CSS-фреймворк, построенный поверх vanilla-extract, который обеспечивает современный и производительный CSS-in-JS без рантайма.

Эта интеграция поддерживает два способа стилизации:

• Используя напрямую Vanilla Extract;
• Styled-components на основе Vanilla-extract

Использование

Вы можете легко добавить styled-vanilla-extract с помощью следующего интеграционного скрипта Qwik:

npm run qwik add styled-vanilla-extract

После установки в вашем проекте будет создан новый маршрут, демонстрирующий использование библиотеки в новом компоненте.

С помощью Vanilla Extract

Пожалуйста, обратитесь к официальной документации для получения дополнительной информации о Vanilla Extract.

import { style } from 'styled-vanilla-extract/qwik';
 
export const blueClass = style({
  display: 'block',
  width: '100%',
  height: '500px',
  background: 'blue',
});

import { blueClass } from './styles.css';
 
export const Cmp = component$(() => {
  return <div class={blueClass} />;
});

npm run qwik add styled-vanilla-extract

Как насчет emotion или других CSS-in-JS библиотек? Несмотря на чрезвычайную популярность, emotion и другие CSS-in-JS библиотеки не являются лучшим выбором для Qwik. Они не оптимизированы по производительности во время выполнения и не имеют хорошей поддержки потоковой передачи SSR, что приводит к снижению производительности сервера и клиента.

Styled-components

Используя ту же интеграцию, вы можете применять styled-components на базе Vanilla Extract. Используйте экспортированную функцию styled при создании ваших компонентов.

import { styled } from 'styled-vanilla-extract/qwik';
 
export const BlueBox = styled.div`
  display: block;
  width: 100%;
  height: 500px;
  background: blue;
`;

import { BlueBox } from './styles.css';
 
export const Cmp = component$(() => {
  return <BlueBox />;
});