useStyles() - 樣式

樣式設定是網頁應用程式設計的重要環節。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> 需要載入樣式。