useStyles() - 样式

样式是 Web 应用程序设计的重要组成部分。Qwik 负责在组件挂载时加载样式信息。使用 useStyles$() 告诉 Qwik 应该加载哪个样式。

为什么不使用内联样式？

确保组件加载正确样式的一种简单方法是将样式信息内联到组件中，如下所示。

export const MyComponent = () => {
  return (
    <>
    <style>.my-class { color: red; }</style>
      My Component
    </>
  );
}

这种方法的问题是我们会加载两次样式。

需要的是独立于组件加载样式。这就是 useStyles$() 的作用。有两种情况

组件在服务器上渲染，样式作为 SSR 的一部分插入到 <head> 中。

向应用程序添加新的组件实例不需要加载样式，因为它们已经作为 SSR 的一部分包含在内。
组件第一次在客户端上渲染。在这种情况下，新组件在 <head> 中没有样式，因为组件不是 SSR 的一部分。

添加一个不是 SSR 一部分的新组件需要加载样式并将其插入到 <head> 中。

此示例包含两个组件

<Sibling>: <Sibling> 组件在服务器上预渲染。由于它是预渲染的，因此它在 <head> 中有样式，因为它属于 SSR。添加额外的 <Sibling> 组件不需要加载任何样式。
<Child>: <Child> 组件可以通过点击 toggle 按钮添加。由于它不是 SSR 预渲染的一部分，因此它在 <head> 中没有样式。切换 <Child> 需要加载样式。