gpt4 book ai didi

css - Angular Material Theme 不会改变 mat-dialog 的强调色

转载 作者:行者123 更新时间:2023-12-05 02:45:48 24 4
gpt4 key购买 nike

我需要根据参数更改我的应用程序的颜色主题,这应该是一个非常简单的操作。在我的应用程序中,我使用了 Fuse Angular Material 主题。当我尝试从主要主题切换到次要主题时,对话框组件的强调色没有改变,而其他组件(例如导航栏)却改变了。

_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 方法中将主题类添加到 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);
}
}

当您知道问题出在哪里时,解决方案非常简单,困难的部分是找出问题所在:)

关于css - Angular Material Theme 不会改变 mat-dialog 的强调色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65763544/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com