Styled Vanilla Extract

Styled-vanilla-extract 是一个基于 vanilla-extract 构建的 CSS 框架，它提供了一个现代且高效的 CSS-in-JS，具有零运行时。

此集成支持两种样式化方式

直接使用 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 />;
});

贡献者

感谢所有帮助改进本文档的贡献者！