[英]Angular Material Theme does not change the mat-dialog accent color
I need to change the colors theme of my app according to a parameter and it should be a very simple operation.我需要根据一个参数更改我的应用程序的 colors 主题,这应该是一个非常简单的操作。 In my app I use a Fuse angular material theme.
在我的应用程序中,我使用了 Fuse angular 材质主题。 When I try to switch from the primary to the secondary theme, the accent color of the dialog component does not change while the other components (for example the navigation bar) do.
当我尝试从主要主题切换到次要主题时,对话框组件的强调色不会改变,而其他组件(例如导航栏)会改变。
_theme.scss _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);
}
component-theme.scss组件主题.scss
@import "../partials/navigation";
@import "../partials/dialog";
@mixin component-themes($theme) {
@include navigation-theme($theme);
@include dialog-theme($theme);
}
_dialog.scss _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;
}
}
}
If I change in the _dialog.scss the value如果我在 _dialog.scss 中更改值
background-color: mat-color($accent) !important;
into进入
background-color: green !important;
it works properly.它工作正常。 It looks like
mat-color($accent)
does not work but only for the scss of this component.看起来
mat-color($accent)
不起作用,但仅适用于该组件的 scss。
For who runs into this problem, I have finally found a solution.对于遇到这个问题的人,我终于找到了解决方案。 I could not change the theme of some components because they are nested and the overlay container blocks the theme propagation.
我无法更改某些组件的主题,因为它们是嵌套的,并且覆盖容器会阻止主题传播。 In order to fix it, I imported the overlayContainer and add the theme class into the overlayContainer in the ngOnInit method.
为了修复它,我导入了 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);
}
}
Very easy solution when you know what is the problem, the hard part was to find it out:)当您知道问题所在时非常简单的解决方案,困难的部分是找出它:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.