[英]Angular Material - Mat-Dialog - change background blur / darkening effect
[英]Angular Material Theme does not change the mat-dialog accent color
我需要根據一個參數更改我的應用程序的 colors 主題,這應該是一個非常簡單的操作。 在我的應用程序中,我使用了 Fuse angular 材質主題。 當我嘗試從主要主題切換到次要主題時,對話框組件的強調色不會改變,而其他組件(例如導航欄)會改變。
_theme.scss
@import '~@angular/material/theming';
@import './component-themes';
$primary: mat-palette($mat-fusedark);
$accent: mat-palette($mat-light-blue, 600, 400, 700);
$warn: mat-palette($mat-red);
$white: mat-palette($mat-white);
$black: mat-palette($mat-black);
$first-theme: mat-light-theme($primary, $accent, $warn);
$background: map-get($first-theme, background);
$foreground: map-get($first-theme, foreground);
@include angular-material-theme($first-theme);
@include component-themes($first-theme);
$second-primary: mat-palette($mat-fusedark);
$second-accent: mat-palette($mat-green, 600, 400, 700);
$second-warn: mat-palette($mat-red);
$second-theme: mat-light-theme($second-primary, $second-accent, $second-warn);
.second-theme {
@include angular-material-theme($second-theme);
@include component-themes($second-theme);
}
組件主題.scss
@import "../partials/navigation";
@import "../partials/dialog";
@mixin component-themes($theme) {
@include navigation-theme($theme);
@include dialog-theme($theme);
}
_dialog.scss
@import '~@angular/material/theming';
@mixin dialog-theme($theme) {
$accent: map-get($theme, accent);
.dialog-wrapper {
.mat-dialog-container {
padding: 0;
overflow: hidden;
}
.mat-dialog-title {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
margin: 0;
padding: 24px;
}
.mat-toolbar {
background-color: mat-color($accent) !important;
}
.mat-dialog-content {
padding: 16px 32px 0px;
margin: 0;
}
.mat-dialog-actions {
display: flex;
flex: 1 1 auto;
margin: 1px 0 0 0;
padding: 0px 32px 16px;
}
}
}
如果我在 _dialog.scss 中更改值
background-color: mat-color($accent) !important;
進入
background-color: green !important;
它工作正常。 看起來mat-color($accent)
不起作用,但僅適用於該組件的 scss。
對於遇到這個問題的人,我終於找到了解決方案。 我無法更改某些組件的主題,因為它們是嵌套的,並且覆蓋容器會阻止主題傳播。 為了修復它,我導入了 overlayContainer 並在 ngOnInit 方法中將主題 class 添加到 overlayContainer 中。
import {OverlayContainer} from '@angular/cdk/overlay';
constructor(
private overlayContainer: OverlayContainer
) {}
ngOnInit() {
if (this.data.theme === 'second-theme') {
this.overlayContainer.getContainerElement().classList.add(this.data.theme);
}
}
當您知道問題所在時非常簡單的解決方案,困難的部分是找出它:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.