useStylesScoped() - スコープ付きスタイル
前のセクションでは、useStyles$()フックを使用して、必要に応じてスタイルを遅延読み込みする方法について説明しました。ブラウザのスタイルはグローバルであり、すべてのDOM要素に適用されるため、Qwikは特定のコンポーネントに固有のスタイルを読み込む方法も提供します。これは、各コンポーネントに一意のクラスを生成し、その一意のクラスIDをスタイルシートに挿入することで実現されます。
useStylesScoped$()を使用して、スタイルを特定のコンポーネントのみにスコープして読み込みます。
例
この例では、同じ名前のクラスを持つ2つのコンポーネントがあります。そのため、2つのスタイルが衝突し、望ましくない動作が発生します。useStylesScoped$()フックを使用して、スタイルを特定のコンポーネントにスコープし、衝突を修正します。