Mat-按钮未按预期显示为白色
提问于 2019-07-17 09:28:52
我创建了一个垫子工具栏，并添加了垫子按钮，使用
@import '~@angular/material/prebuilt-themes/indigo-pink.css';垫子按钮的字体颜色保持为灰色而不是白色
这就是它看起来的样子
下面是component.html代码
<mat-toolbar-row>
<div fxHide.gt-xs>
<button mat-button>
<mat-icon (click)="sidenav.toggle()">menu</mat-icon>
menu
</button>
</div>
<div class="icon-center" fxLayout="column" fxLayoutAlign="center center" fxFlex >
BuySell
</div>
<div fxFlex fxLayout fxLayoutAlign="flex-end" fxHide.xs>
<button mat-button *ngIf="!signedIn" routerLink="/auth"><span class="label"> Log in </span></button>
<button mat-button *ngIf="!(path == '/home')" routerLink="/home"><span class="label"> Home </span>
</button>
<button mat-button *ngIf="signedIn" routerLink="/demo">
<span class="label" > Demo </span>
</button>
<button mat-button *ngIf="signedIn" color="accent" routerLink="/stocks">
<span class="label" > Stocks </span>
</button>
<button mat-button *ngIf="signedIn" color="accent" routerLink="/">
<span class="label" (click)="logOut()">Log Out</span>
</button>
</div>
</mat-toolbar-row>
这是component.ts
export class HeaderComponent implements OnInit {
signedIn: boolean;
public path = '' ;
@Output() public sidenavToggle = new EventEmitter();
constructor( private amplifyService: AmplifyService,
private router: Router) {
this.amplifyService.authStateChange$
.subscribe(authState => {
this.signedIn = authState.state === 'signedIn';
});
this.path = router.url;
}
public onToggleSidenav = () => {
this.sidenavToggle.emit();
}
}
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-07-17 09:54:32
您的mat-button的CSS属性很可能会被类.label的跨度覆盖。
如果其中没有什么重要的东西，您可能希望完全删除.label类，或者检查.label类是否包含可能覆盖了mat-button默认样式的任何CSS属性(例如color)。
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>BuySell</span>
<span class="example-spacer"></span>
<button mat-button routerLink="/auth">
<span>Log in</span>
</button>
<button mat-button routerLink="/stocks">
Stocks
</button>
</mat-toolbar-row>
</mat-toolbar>另外，我注意到你的一些按钮是用accent颜色设计的。请注意，对于这些按钮，按钮中的文本标签将是红色的，而不是白色的。
否则，您的工具栏应该工作得很好，如此demo所示。
Stack Overflow用户
发布于 2019-07-17 10:09:38
你可以用.label类CSS覆盖你的mat按钮CSS。将CSS更改为：
:host ::ng-deep .mat-button {
color: #FFF !important;
}Stack Overflow用户
发布于 2019-07-17 09:49:26
尝试使用CSS来更改它：
.mat-button {
color: #FFF;
opacity: 1;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57072676
复制相关文章
![[壹刊]Azure AD（四）知识补充-服务主体](https://ask.qcloudimg.com/http-save/yehe-1023806/a1900d370f06b8e4cf628a9d25195625.png)
腾讯云开发者
