angular - “颜色”属性不起作用在 Angular Materia 的侧边导航中
问题描述
我无法mat-toolbar
根据我的主题改变颜色。请看我的代码:
HTML
<mat-sidenav #drawer class="sidenav" fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false">
<mat-toolbar color="primary" >Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">
<mat-icon aria-hidden="false" aria-label="Health Check" color="primary">poll</mat-icon>
Poll
</a>
<a mat-list-item href="#">
<mat-icon aria-hidden="false" aria-label="Health Check" color="primary">info</mat-icon>
Announcements
</a>
</mat-nav-list>
</mat-sidenav>
但在内容上,我没有任何问题。请看我的代码。
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<a mat-button href="#">
<mat-icon aria-hidden="false" aria-label="Health Check">accessibility_new</mat-icon>
Health Check
</a>
<span class="spacer"></span>
<div *ngIf="!isXs">
<a mat-button href="#">
<mat-icon aria-hidden="false" aria-label="Health Check">poll</mat-icon>
Poll
</a>
<a mat-button href="#">
<mat-icon aria-hidden="false" aria-label="Health Check">info</mat-icon>
Announcements
</a>
</div>
</mat-toolbar>
<!-- Add Content Here -->
<ng-content></ng-content>
</mat-sidenav-content>
解决方案
在 mat-nav 组件中需要将 css 更改为:
.sidenav .mat-toolbar {
background: inherit;
}
至
.sidenav {
background: inherit;
}
当 mat-nav 组件由原理图创建时会出现此问题。
推荐阅读
- csvhelper - 使用 .Constant() 与 CsvHelper 进行错误映射
- apache-kafka - 无法从远程机器与 Kafka 集群通信
- google-cloud-firestore - 在 MobX 中正确同步 Firestore 集合
- hyperledger-fabric - 新加入的组织中的 Hyperledger Fabric 链码实例化失败
- database - LINQPad 使用哪些信息来生成关联属性/导航属性?
- python - Sqlite 到 csv 到 excel 转换不在列中插入值
- java - 在 Xpages 中。如何将 serviceBean(由 extlib REST 服务调用)中的值传递回注释文档
- c++ - 什么时候不调用被覆盖的虚函数
- c++ - 将值从数组修改为另一个时输出不正确
- corda - Corda 4 - 通过特定的 transactionid 查询 vault