---
# System prepended metadata

title: useStylesScoped() - Scoped styles
tags: [Styling]

---

# useStylesScoped() - Scoped styles

> * 如有錯誤處指正或任何建議，懇請留言，感謝!
> * 搭配 ChatGPT 進行翻譯，請小心服用
> * ▸ ... 為英文原文


:::spoiler ...
In previous sections, we have discussed how styles can be loaded lazily as they are needed using [`useStyles$()`](https://qwik.builder.io/docs/components/styles/#usestyles) hook. Browser styles are global and apply to all DOM elements, for this reason, Qwik also provides a way to load styles that are specific to a specific component. This is achieved by generating a unique class for each component and then inserting that unique class id into the stylesheet.

Use `useStylesScoped$()` to load and scope the style to a specific component only.

### Example

In this example, there are two components both of which have a class with the same name. Because of that, the two styles collide which results in undesirable behavior. Use the `useStylesScoped$()` hook to scope the styles to a specific component and fix the collision.

::: 


###### tags: `Styling`