Angular 材质组件不继承类

问题描述 投票:0回答:1

我使用的是有角度的材质主题,应用了默认的浅色主题,如果 .dark-theme 类位于元素上,则应用深色主题。我遇到了一个问题,尽管使用的角度材质组件不会从父元素继承此类。

这是显示问题的示例组件:

<div class="dark-theme">
    <h2>Hello world</h2>
    <div class="menu-button">
        <button
            color="accent"
            mat-icon-button
            [matMenuTriggerFor]="menu"
            aria-label="Dropdown menu of available pages"
        >
            <mat-icon>menu</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
            <button (click)="log('home clicked')" mat-menu-item>Home</button>
        </mat-menu>
    </div>
</div>

the component from the above code

我期望上面的代码为 mat-menu 组件提供深色主题类。如果我直接应用该类

<mat-menu class="dark-theme" #menu="matMenu">
,它会按预期工作,并且我会看到深色主题的菜单。此外,我尝试放弃并这样做,但使用BehaviorSubject和服务在我的实际组件中动态分配类
[class.dark-theme]="stateService.isDarkModeEnabled()"
,但是当启用暗模式变量时,这仍然无法应用暗主题类。

我不认为这是问题,但作为参考,这里是我的样式是如何在 custom-styles.scss 中定义的,该样式包含在 angular.json 中。

@include mat.all-component-themes($default-theme);

:root {
    --primary-default: #{mat.get-theme-color($default-theme, primary, default)};
}

.dark-theme {
    @include mat.all-component-themes($dark-theme);
    --primary-default: #{mat.get-theme-color($dark-theme, primary, default)};
}
angular angular-material
1个回答
0
投票

我想我终于弄清楚了这个问题,这篇文章很有帮助:如何添加类到动态渲染的角度材质组件

我没有意识到 cdk 覆盖容器不是主应用程序组件本身的一部分。我也不明白为什么 [ngClass] 不起作用,而且 [class.dark-theme] 还没有起作用 [class] did 起作用。

© www.soinside.com 2019 - 2024. All rights reserved.