Styled Vanilla Extract

Styled-vanilla-extractは、vanilla-extractを基盤としたCSSフレームワークであり、ゼロランタイムでモダンで高性能なCSS-in-JSを提供します。

このインテグレーションは、2つのスタイリング方法をサポートしています。

Vanilla Extractを直接使用します。
Styled-components (Vanilla-extractによる)

使用方法

次のQwikスタータースクリプトを使用して、styled-vanilla-extractを簡単に追加できます。

npm run qwik add styled-vanilla-extract

インストール後、プロジェクトに新しいルートが作成され、新しいコンポーネントでライブラリの使用方法を示します。

Vanilla Extractによる方法

Vanilla Extractの詳細については、公式ドキュメントを参照してください。

styles.css.ts

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

component.tsx

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

同じインテグレーションを使用して、Vanilla Extractを基盤としたstyled-componentsを使用できます。エクスポートされたstyled関数を使用してコンポーネントを作成します。

styles.css.ts

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

component.tsx

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

貢献者

このドキュメントの改善に貢献してくれたすべての貢献者にお礼申し上げます！