-
Book Overview & Buying
-
Table Of Contents
Blazor WebAssembly by Example - Third Edition
By :
The location of the cascading style sheets (CSS) used to style our Blazor WebAssembly apps is usually the wwwroot folder. Usually, the styles defined in those CSS files are applied to all the components in the web app. However, there are times when you want more control over the styles that are applied to a particular component. To achieve that, you use CSS isolation. With CSS isolation, the styles in the designated CSS file will override the global styles and will target only a specific component and its child components.
To add a CSS file that is scoped to a specific component, create a CSS file in the same folder as the component with the same name as the component, but with a .css file extension. For example, the CSS file for the Alert.razor component would be called Alert.razor.css.
The following markup shows an updated version of the Alert component. In this version, I have added the two highlighted classes: dialog‑container...