Overriding isolated css in blazor component library by consuming application

Question

I have set up a blazor component library that defines several blazor components + isolated CSS files. These css files are transpiled from sass files in which I specify the bootstrap grid system using bootstrap's mixins, e.g. @include make-col-ready(); or @include make-col(4);.

This all works well and the CSS and blazor components are able to be consumed by my blazor webassembly app, which I set up with a project reference dependency to the component library.

Now the ideal situation would be if I could have the isolated CSS in the component library act as default styling, but that I can override this styling (so also the bootstrap mixins) in the consuming application. Ideally I would like to have !default sass variables set up in my component library, that are used to determine whether to use the default css, or to not include it at all. I have tried something like the following code snippet (just a quick sketch, not to be taken too seriously), but from my understanding, it's not possible to override these variables before they are compiled to css for the consuming application to import.

/* Component css */
$defaultComponentCss: true !default;


@mixin foobar($defaultComponentCss) {
    @if($defaultComponentCss) {
        border-radius: 10px;
        background-color: red;
        border-top-right-radius: 83px;
    }
}

.main-content {
    @include foobar($defaultComponentCss);
}

/* SCSS file in the consuming application*/
$defaultComponentCss: false;

/*[non-default styling]*/

TL;DR; Is there a way to set up a blazor component library so that a consuming application can override the existing isolated css (in the component library), so that different bootstrap grid mixins can be used?

I hope I provided enough context, if not I'd be glad to provide more.

Thanks in advance!

Answer 1

Blazor CSS Isolation adds a random scope identifier starting with b- to your component at compile time. So an example HTML looks something like this:

<div class="ocblCalendarDay selectedDate" b-9qatbelgxs>13</div>

Note the b-9qatbelgxs

Because it's random you will need to override this and give it a name. Open your .csproj file for your component library and add this:

<ItemGroup>
    <None Update="*.razor.css" CssScope="my-scope" />
</ItemGroup>

If you have lots of components or if they are in sub folders, I would recommend creating a CSS scope for each one. Here's my Calendar View example:

<ItemGroup>
    <None Update="Calendar/CalendarDataView.razor.css" CssScope="ocbl-calendardataview-css" />
</ItemGroup> 

Compile your component library and you will the scope name is now set:

<div class="ocblCalendarDay selectedDate" ocbl-calendardataview-css="">13</div>

Now, in your project CSS (not your component library) you can override the style like so:

.ocblCalendarDay.selectedDate[ocbl-calendardataview-css] {
    background-color: #FF0000;
}

Make sure your CSS link is after your CSS bundle link.