風格化 Vanilla Extract

風格化 Vanilla Extract 是一個建構在 Vanilla Extract 之上的 CSS 框架，它提供了一個現代且高效能的 CSS-in-JS，具有零運行時。

此整合支援兩種樣式設定方式

直接使用 Vanilla Extract。
由 Vanilla Extract 支援的風格化元件

用法

您可以使用以下 Qwik starter 腳本輕鬆添加 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 串流支援，這會導致伺服器和客戶端效能下降。

樣式化元件

使用相同的整合，您可以使用由 Vanilla Extract 支援的樣式化元件，使用匯出的 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 />;
});

貢獻者

感謝所有幫助改進本文件內容的貢獻者！