useStyles() - Стили

Стилизация является важной частью дизайна веб-приложения. Qwik отвечает за загрузку информации о стилях при монтировании компонента. Используйте useStyles$(), чтобы указать Qwik, какой стиль должен быть загружен.

Почему не встроенные стили?

Простейший способ загрузить стили заключается в том, чтобы встроить информацию о стилях прямо в компонент следующим образом:

export const MyComponent = () => {
  return (
    <>
      <style>.my-class { color: red; }</style>
      Мой компонент
    </>
  );
}

Проблема этого подхода заключается в том, что мы будем загружать стили дважды:

Стили вставляются в HTML как часть SSR.
Затем, когда компонент становится недействительным и его нужно перерисовать, стили загружаются снова, поскольку они встроены.

Необходимо загрузить стили независимо от компонента. Для этого и существует useStyles$(). Существует два сценария:

Компонент рендерится на сервере, а стили вставляются в секцию <head> страницы, как часть SSR.

Добавление нового экземпляра компонента в приложение не требует загрузки стилей, так как они уже включены, как часть SSR.
Первый рендер компонента происходит на клиенте. В этом случае новый компонент не будет иметь стилей в <head>, так как компонент не был частью SSR.

Добавление нового компонента, который не был частью SSR, требует загрузки и вставки стилей в секцию <head>.

Пример

Этот пример содержит два компонента:

<Sibling>: Компонент <Sibling> предварительно рендерится на сервере, поэтому он имеет стили в <head>, так как они были добавлены во время SSR. Добавление дополнительных компонентов <Sibling> не требует загрузки стилей.
<Child>: Компонент <Child> можно добавить, нажав на кнопку переключить. Поскольку он не был частью предварительного рендера на сервере, у него нет стилей в <head>. Переключение <Child> требует, чтобы стили были загружены.

Next: useStylesScoped() - Локальные стили

Edit Tutorial