Bootstrap样式覆盖Angular Material按钮样式问题求助

问题概述 #

通过@import "../../../../bootstrap.min.css";引入Bootstrap后，Angular Material的mat-flat-button按钮样式被Bootstrap覆盖，原本应显示为带圆角、符合Material设计风格的按钮，现在变成了更小、无圆角的Bootstrap默认按钮样式。

按钮HTML代码：

<button mat-flat-button color="primary" (click)="submitDialog()">
    New submission
</button>

解决方案 #

1. 调整样式导入顺序 #

将Angular Material的主题样式文件放在Bootstrap之后导入，利用CSS层叠规则让Material样式获得更高优先级。
示例（全局样式文件styles.scss）：

@import "../../../../bootstrap.min.css";
@import "@angular/material/prebuilt-themes/indigo-pink.css"; // 替换为你的Material主题文件

2. 编写高优先级样式覆盖 #

针对mat-flat-button类编写更具体的CSS规则，手动恢复Material按钮的核心样式：

button.mat-flat-button {
    border-radius: 4px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    min-height: 36px;
    border: none;
    background-color: var(--mat-primary); // 匹配Material主题色
    color: white;
}

若使用组件样式隔离，可通过::ng-deep提升样式作用范围（仅针对冲突组件使用）：

::ng-deep button.mat-flat-button {
    // 上述样式代码
}

3. 禁用Bootstrap全局按钮样式 #

如果不需要Bootstrap的默认按钮样式，可手动重置按钮基础样式：

@import "../../../../bootstrap.min.css";

// 清除Bootstrap按钮的全局样式，让Material样式生效
.btn {
    all: unset;
}

若使用Bootstrap源码而非压缩版，也可通过自定义变量提前覆盖按钮默认值：

// 先设置变量，再导入Bootstrap源码
$btn-border-radius: 4px;
$btn-padding-y: 0;
$btn-padding-x: 16px;
@import "../../../../bootstrap.scss";

4. 调整组件样式隔离 #

针对冲突组件关闭样式隔离，让组件内样式能覆盖全局Bootstrap样式：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class YourComponent {
    // 组件逻辑
}

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