useStylesScoped() - 作用域样式
在前面的部分中,我们讨论了如何使用 useStyles$()
钩子在需要时延迟加载样式。浏览器样式是全局的,适用于所有 DOM 元素,为此,Qwik 还提供了一种方法来加载特定于特定组件的样式。这是通过为每个组件生成一个唯一的类,然后将该唯一的类 ID 插入样式表来实现的。
使用 useStylesScoped$()
将样式加载并限定到特定组件。
示例
在这个示例中,有两个组件,它们都具有相同名称的类。因此,这两种样式会发生冲突,导致不希望的行为。使用 useStylesScoped$()
钩子将样式限定到特定组件,并解决冲突。