Angular Material: 自定义主题后组件背景色变透明

Question

问题：

自定义我的 Angular Material 应用程序的主题颜色后，多个 material 组件失去了背景颜色，例如（MatTooltip、MatSelect、MatDialog 等...）

我按照 Official Guide 来自定义我的应用程序的主题，而且我很确定我完全按照这封信中的所有内容进行操作，但是后来这个奇怪的错误发生了，互联网上的任何建议都没有帮助。

截图：

Screenshot 个 MatTooltip 失去背景颜色。
Screenshot 个 MatSelect 失去背景颜色。

主题文件`_theming.scss`:

这是用于应用程序主题的文件，我创建了两个主题，浅色和深色，可通过 class 切换。

@import 'node_modules/@angular/material/theming';

@include mat-core();

$light-primary     : mat-palette($mat-blue, 800);
$light-accent      : mat-palette($mat-amber, 500);
$light-warn        : mat-palette($mat-red, 500);
$light-theme       : mat-light-theme((
  color: (
    primary: $light-primary,
    accent: $light-accent,
    warn: $light-warn,
  )
));

$dark-primary      : mat-palette($mat-blue, 800);
$dark-accent       : mat-palette($mat-amber, 800);
$dark-warn         : mat-palette($mat-red, 800);
$dark-theme        : mat-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    warn: $dark-warn,
  )
));

.light-theme {
  @include angular-material-theme($light-theme);
}

.dark-theme {
  @include angular-material-theme($dark-theme);
}

此文件导入全局styles.scss。没有导入其他主题。

版本信息：

Angular 版本: 11
Angular Material 版本: 11

Answer 1

这些组件有自己的样式。用您自己的值覆盖它们或取消设置它们：

在模板中：

<mat-paginator class="background" ... >
</mat-paginator>

样式表：

.background {
  background-color: unset;
}

由于这种情况在您的应用程序的多个位置发生，并且您似乎想要实现深色主题，您还可以在 styles.scss:

中添加一个 class

.theme {
  @include angular-material-theme($theme-light);
}

.dark-theme {
  @include angular-material-theme($theme-dark);
}

并根据布尔值有条件地添加它们：

[ngClass]="{ 'dark-theme': isDarkTheme }"

或：

[ngClass]="{ isDarkTheme? 'dark-theme' : 'theme' }"

Answer 2

有一个解决方法，虽然不漂亮但有效：

1- 将路径 node_modules/@angular/material/prebuilt-themes/ 中预建主题的内容（根据需要选择浅色或深色主题）复制到新的 scss 文件中。

2- 将颜色变量添加到文件顶部

$color-primary : // choose your color
$color-accent  : // choose your color
$color-warn    : // choose your color

// Default theme below
// ...

3- 使用文本编辑器查找默认主题颜色并将其替换为相应的变量：


/* 
* If deeppurple-amber theme:
*    - Replace #673ab7 with $color-primary.
*    - Replace #ffd740 with $color-accent.
*    - Replace #f44336 with $color-warn.
* ==================================================
* If indigo-pink theme:
*    - Replace #3f51b5 with $color-primary.
*    - Replace #ff4081 with $color-accent.
*    - Replace #f44336 with $color-warn.
* ==================================================
* If pink-bluegrey theme:
*    - Replace #c2185b with $color-primary.
*    - Replace #b0bec5 with $color-accent.
*    - Replace #f44336 with $color-warn.
* ==================================================
* If purple-green theme:
*    - Replace #7b1fa2 with $color-primary.
*    - Replace #69f0ae with $color-accent.
*    - Replace #f44336 with $color-warn.
* ==================================================
*/

4- 通过引用主题动态编译和更改您的主题

<head>
  ...
  <link id="theme" rel="stylesheet" href="">
</head>

this.document.getElementById('theme').setAttribute('href', this.chosenThemePath);

Angular Material: 自定义主题后组件背景色变透明

Angular Material: Components background color became transparent after customizing theme