Блог

Я настроил библиотеку компонентов blazor, которая определяет несколько компонентов blazor изолированные файлы CSS. Эти файлы css загружаются из файлов sass, в которых я указываю сеточную систему начальной загрузки с использованием миксинов начальной загрузки, например @include make-col-ready(); или @include make-col(4); .

Все это работает хорошо, и компоненты CSS и blazor могут использоваться моим приложением blazor webassembly, которое я настроил с зависимостью ссылки проекта от библиотеки компонентов.

Теперь идеальной ситуацией было бы, если бы я мог использовать изолированный CSS в библиотеке компонентов в качестве стиля по умолчанию, но я могу переопределить этот стиль (а также загрузочные микшеры) в потребляющем приложении. В идеале я хотел бы иметь !переменные sass по умолчанию, настроенные в моей библиотеке компонентов, которые используются для определения, использовать ли css по умолчанию или не включать его вообще. Я попробовал что-то вроде следующего фрагмента кода (просто краткий набросок, не следует воспринимать слишком серьезно), но, насколько я понимаю, невозможно переопределить эти переменные до того, как они будут скомпилированы в css для импорта потребляющего приложения.

 /* Component css */
$defaultComponentCss: true !defau<


@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;
Есть ли способ настроить библиотеку компонентов blazor, чтобы потребляющее приложение могло переопределять существующий изолированный css (в библиотеке компонентов), чтобы можно было использовать разные микшеры bootstrap grid?

Надеюсь, я предоставил достаточно контекста, если нет, я был бы рад предоставить больше.

Заранее спасибо!

Изоляция Blazor CSS добавляет случайный идентификатор области, начинающийся с b-, к вашему компоненту во время компиляции. Итак, пример HTML выглядит примерно так:

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

Обратите внимание на b-9qatbelgxs

Поскольку это случайное, вам нужно переопределить это и присвоить ему имя. Откройте ваш файл .csproj для вашей библиотеки компонентов и добавьте это:

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

Если у вас много компонентов или они находятся во вложенных папках, я бы рекомендовал создать область CSS для каждого из них. Вот мой пример просмотра календаря:

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

Скомпилируйте свою библиотеку компонентов, и теперь имя области будет установлено:

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

Теперь в вашем проекте CSS (а не в вашей библиотеке компонентов) вы можете переопределить стиль следующим образом:

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

Убедитесь, что ваша ссылка на CSS находится после ссылки на CSS bundle.