如何自定义Blazor Bootstrap组件库的组件样式？

方法1：通过CSS变量直接覆盖（推荐） #

Blazor Bootstrap组件基于Bootstrap的CSS变量定义样式，无需修改SCSS源码，直接重写变量即可快速调整样式。

全局修改（所有Accordion组件生效） #

在wwwroot/css/site.css（或项目全局样式文件）中添加：

.accordion {
    --bs-accordion-bg: #f0f8ff; /* 自定义折叠面板整体背景色 */
    --bs-accordion-btn-bg: #e6f7ff; /* 标题按钮的默认背景色 */
    --bs-accordion-active-bg: #b3d8ff; /* 面板展开时的标题按钮背景色 */
}

注：--bs-是Bootstrap默认的变量前缀，对应你提供的SCSS代码中的#{$prefix}。

局部修改（仅当前组件内的Accordion生效） #

给目标Accordion添加自定义类：

<Accordion Class="custom-accordion px-3">
    <!-- 面板内容 -->
</Accordion>

然后在该组件的component.razor.css隔离样式文件中添加：

.custom-accordion {
    --bs-accordion-bg: #f0f8ff;
    --bs-accordion-btn-bg: #e6f7ff;
}

这种方式利用自定义类的优先级覆盖默认变量，无需穿透隔离样式，简洁高效。

方法2：穿透隔离样式强制覆盖 #

如果变量方式未生效，可借助Blazor的::deep关键字突破样式隔离，直接修改组件内部元素的样式：
在组件的component.razor.css中添加：

::deep .accordion .accordion-button {
    background-color: #e6f7ff;
}

::deep .accordion .accordion-body {
    background-color: #f0f8ff;
}

若默认样式优先级过高，可临时使用!important强制覆盖（尽量避免，优先用变量或更具体的选择器）：

::deep .accordion .accordion-button {
    background-color: #e6f7ff !important;
}

方法3：通过SCSS变量全局定制（进阶） #

若项目使用SCSS管理样式，可在引入Blazor Bootstrap的SCSS文件前重写默认变量：

// 先定义自定义变量
$accordion-bg: #f0f8ff;
$accordion-button-bg: #e6f7ff;
$accordion-button-active-bg: #b3d8ff;

// 再引入Blazor Bootstrap的SCSS
@import '~blazor-bootstrap/scss/blazor-bootstrap';

此方式适合全局统一修改所有Blazor Bootstrap组件的默认样式，需确保项目已配置SCSS编译环境。

内容的提问来源于stack exchange，提问作者mark_h