Understanding CSS isolation

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 we want more control over the styles that are applied to a particular component. To achieve that, we use CSS isolation. With CSS isolation, the styles in the designated CSS file will override the global styles.

Enabling CSS isolation

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 is for an updated version of the Alert component. In this version, we have added the two highlighted classes:

Alert.razor

@if (Show)
{
    <div class="dialog-container">
        &lt...