Scoped Styling | Tutorial

In previous sections, we have discussed how styles can be loaded lazily as they are needed using 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.