Question

我创建了一个垫子工具栏并使用

添加了垫子按钮

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

mat按钮的字体颜色保持灰色而不是白色

这是它的样子这是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();
  }

}

Answer 1

尝试使用CSS进行更改：

.mat-button {
    color: #FFF;
    opacity: 1;
}

Answer 2

您的mat-button的CSS属性可能被类.label的跨度覆盖。

如果其中没有任何重要内容，则可能要完全删除.label类，或者检查.label类是否包含任何CSS属性（例如color）可能会覆盖mat-button的默认样式。

<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所示。

Answer 3

您可以通过添加CSS文件来尝试此操作。

/deep/ .mat-button {
    color: #FFF;
    opacity: 1;
}

通过遵循this link

，您可以对/ deep /有更多的了解

Answer 4

您可以使用.label类CSS覆盖mat按钮CSS。将您的CSS更改为此：

:host ::ng-deep .mat-button {
    color: #FFF !important;
}

垫按钮未按预期显示白色

4 个答案: