Scoped & Global Styles in Angular
First Published: May 5th, 2020
This week in the Angular Basics egghead collection we're talking about styling.
In other frameworks, CSS modules and CSS-in-JS (sometimes referred to as JSS) are both quite popular. I've actually become a huge fan of using styled components in React (I'm using them with Emotion on this site!).
One of the reasons for this is the ability to add scoped styling to your app. This prevents inadvertently overwriting styles due to a shared global class somewhere. You won't hear much about these options in the Angular community, though, and that's because Angular comes with a scoped CSS option right out of the box. In this lesson, I'll show you how this works.
Even though the default scoped styles in Angular components are really useful, sometimes we do want to apply styles across the whole app. We may also want to make classes available globally. Luckily, Angular provides a nice way to do this in the
Here's the code for both of these lessons:
← Back to writing