typescript 更改matsnackbar的颜色

6za6bjd0 于 2023-05-08 发布在 TypeScript

关注(0)|答案(1)|浏览(126)

我在Angular中很难改变snackbar（Angular材质）的颜色。我在ts中使用了panelClass，并在全局css中输入了它，但颜色没有改变。怎么修？我在这个框架里有点新鲜。
app.component.ts

import { Component } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MatSnackBarHorizontalPosition } from '@angular/material/snack-bar';
import { MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
  verticalPosition: MatSnackBarVerticalPosition = 'top';
  constructor(private snackBar: MatSnackBar) { }
  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
      panelClass: ['.snackbar-style'],
    });
  }
}

app.component.css

.snackbar-style {
  background-color: black;
  color: hotpink;  
}

typescript

来源：https://stackoverflow.com/questions/65786238/change-color-of-matsnackbar

1条答案

按热度按时间

qvtsj1bj1#

在global styles.scss中添加：

:root {
    --primary-color: #153d77;
    --secondary-color: #6c757d;
    --white-color: #fff;
    --success-color: #198754;
    --delete-color: #dc3545;
    --background-color: #f2f2f2;
  }
  
  .success-snackbar {
    color: white;
    --mdc-snackbar-container-color: var(--success-color);
    --mat-mdc-snack-bar-button-color: var(--white-color);
  }

.error-snackbar {
    max-width: max-content !important;
    color: white;
    --mdc-snackbar-container-color: var(--delete-color);
    border-color: #f5c6cb;
  
    --mat-mdc-snack-bar-button-color: var(--white-color);
  }
  
  .light-success-snackbar {
    color: #155724;
    --mdc-snackbar-container-color: #d4edda;
    --mat-mdc-snack-bar-button-color: darkgreen;
  }
  
  .light-error-snackbar {
    color: #721c24;
    --mdc-snackbar-container-color: #f8d7da;
    border-color: #f5c6cb;
    --mat-mdc-snack-bar-button-color: darkred;
  }

并调用 .success-snackbar 插入 panelClass：

openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
      panelClass: ['success-snackbar'],
    });
  }

赞(0）回复(0）举报 2023-05-08

我来回答

typescript 更改matsnackbar的颜色

1条答案

相关问题

热门标签

最新问答