Styled Vanilla Extract

Styled-vanilla-extract 是一个构建在 vanilla-extract 之上的 CSS 框架，提供了现代化且高性能的零运行时 CSS-in-JS 解决方案。

该集成支持两种样式化的方式：

直接使用 Vanilla Extract。
使用由 Vanilla-extract 提供支持的 Styled-components。

使用方法

您可以通过使用以下 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 />;
});

Contributors

Thanks to all the contributors who have helped make this documentation better!