小吃店的颜色为什么没有变化？

Question

我想更改小吃栏组件的铭文的背景和颜色。但是当我设置样式时并没有改变。怎么做对呢？

ts：

this._snackBar.open('Test', 'Done!', {
  verticalPosition: 'top',
  horizontalPosition: 'end',
  duration: 2500,
  panelClass: ['test']
 });

css：

.test {
    background: #1abc9c;
    color     : blue;
}

Answer 1

添加::ng-deep，或在全局样式文件（默认src/styles.css）中声明它。

由于它是使用CDK Overlay在主体中创建的，因此组件样式范围对此无效。

::ng-deep .test {
  background: #1abc9c;
  color     : blue;
}

https://stackblitz.com/edit/angular-zrwxbw?file=app%2Fsnack-bar-component-example.css

Answer 2

您好，您需要重写mat-snack-bar-container类

.mat-snack-bar-container {
    color: rgba(255,255,255,.7);
    background: #323232; // change the color here
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}