Blazor Bootstrap中_reboot.scss覆盖自定义按钮样式如何解决

核心原因 #

Blazor Bootstrap 依赖的 _reboot.scss 是 Bootstrap 全局基础重置样式表，默认对按钮、行内文本元素设置了基础盒模型、行高、边距规则，样式不生效的常见诱因有三个：

1. 自定义样式未命中组件实际渲染的内层DOM结构，仅给外层按钮标签加居中规则无法作用到文本节点
2. 自定义CSS文件加载顺序在Blazor Bootstrap样式文件之前，同权重规则被后加载的框架样式覆盖
3. 单类选择器、单ID选择器的特异性不足，无法匹配框架样式叠加后的选择器权重

直接移除全局Bootstrap引用会导致所有依赖Bootstrap基础规则的组件样式错乱，不具备可行性。

可落地修复步骤 #

• 第一步：修正样式加载顺序
  把你的项目自定义CSS文件的引用，放到Pages/_Host.cshtml（Blazor Server）或者wwwroot/index.html（Blazor WASM）里所有Blazor Bootstrap、Bootstrap原生CSS引用的最后面，同权重下后加载的CSS规则优先级更高。
• 第二步：命中按钮实际渲染结构
  Blazor Bootstrap的Button组件渲染后会在内层自动生成.blazor-btn-content的span标签包裹按钮文本，只给外层button设置居中规则无法生效，直接使用如下组合选择器写样式，不需要加!important：

/* 替换成你自己给按钮加的自定义类名 */
.btn.your-custom-btn-class {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}
.btn.your-custom-btn-class .blazor-btn-content {
    margin: 0;
    width: 100%;
    text-align: center;
}

• 第三步：如果仍存在样式覆盖，用合法特异性提升优先级
  不要滥用!important，也不用单独套ID选择器，借助项目全局根容器的类名叠加选择器权重即可——所有Blazor项目默认都有类名为app的根容器包裹全部UI，把选择器改成.app .btn.your-custom-btn-class，特异性为0,2,0，远高于_reboot.scss中单标签选择器（0,0,1）、单类选择器（0,1,0）的权重，可稳定覆盖框架默认规则。

注意：不要直接修改Nuget包目录下的_reboot.scss源码，后续更新Blazor Bootstrap包时所有修改会被直接覆盖，无法持久生效。

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