如何导入Angular Material Datepicker的CSS且不覆盖Bootstrap样式

问题背景 #

项目原本基于Bootstrap构建，angular.json中样式配置如下：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.css"
],

通过ng add @angular/material安装Angular Material并选择Indigo-Pink主题后，样式配置被修改为：

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.css",
],

此时Angular Material日期选择器可正常工作，但Bootstrap部分样式被覆盖，例如nav-link类的链接无法点击。

已尝试操作 #

尝试仅引入Datepicker的主题文件./node_modules/@angular/material/datepicker/_datepicker-theme.scss，配置如下：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "./node_modules/@angular/material/datepicker/_datepicker-theme.scss",
],

日期选择器功能正常，但样式显示异常，推测缺少必要的依赖样式文件。

可行解决方案 #

方案1：调整样式加载顺序 #

将Bootstrap样式放在Angular Material预构建主题之后，让Bootstrap的样式优先级更高，避免被Material全局样式覆盖：

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.css"
],

注：此方法可能仍存在局部样式冲突，需针对性调整。

方案2：创建自定义Material主题，仅包含Datepicker样式 #

预构建主题包含所有Material组件的全局样式，容易与Bootstrap冲突。可创建仅针对Datepicker的自定义主题：

1. 在src目录下新建material-datepicker-theme.scss文件，内容如下：

@import '@angular/material/theming';
@import '@angular/material/datepicker/_datepicker-theme.scss';

// 定义主题调色板（可根据需求修改）
$datepicker-primary: mat-palette($mat-indigo);
$datepicker-accent: mat-palette($mat-pink, A200, A100, A400);
$datepicker-warn: mat-palette($mat-red);

// 创建浅色主题
$datepicker-theme: mat-light-theme((
  color: (
    primary: $datepicker-primary,
    accent: $datepicker-accent,
    warn: $datepicker-warn,
  )
));

// 仅将主题应用到Datepicker组件
@include mat-datepicker-theme($datepicker-theme);

2. 修改angular.json的样式配置，替换预构建主题为自定义文件：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/material-datepicker-theme.scss"
],

此方法仅加载Datepicker所需样式，不会引入Material的全局重置样式，从根源避免冲突。

方案3：针对性修复冲突样式 #

若上述方案仍存在个别样式冲突，可在src/styles.css中手动覆盖冲突样式。例如针对nav-link无法点击的问题：

.nav-link {
  pointer-events: auto !important;
  /* 其他需要修复的样式属性 */
}

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