Question

材料小吃店的颜色没有改变

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class SnackbarService {

  constructor(public snackBar: MatSnackBar) {
  }
  show(message: string, type?: string, duration?: any) {
    this.snackBar.open(message, type, {
      duration: duration ? duration : 2000,
      panelClass: [type],
    });
  }
}

这是调用，=> this.snack.show(response.message, "success", 3000)

css类

.info {
    background: #2196F3;
}
.success {
    background: #1DE9B6;
}
.error {
    background: #B00020;
}

但没有CSS类应用于出现的任何Snakbar

Answer 1

您需要传递panelClass的类名。 type返回0无效

  panelClass: ['info'],

Answer 2

尝试将Component的encapsulation属性设置为ViewEncapsulation.None

赞：

@Component({
  selector: 'your_selector',
  templateUrl: 'url',
  styleUrls: ['css_file'],
  encapsulation: ViewEncapsulation.None  <-- This need to set to override the default CSS
})

WORKING DEMO

Answer 3

尝试在style.scss中像这样编辑CSS：

.mat-snack-bar-container.success {
    background: #1DE9B6;!important;
}

Answer 4

编写类.info .success .error时尝试使用::ng-deep

也尝试在CSS中使用background-color代替background

更正的代码

::ng-deep .info {
    background-color: #2196F3;
}
::ng-deep .success {
    background-color: #1DE9B6;
}
::ng-deep .error {
    background-color: #B00020;
}

Answer 5

我也遇到过同样的问题，看起来它已被其他顶级CSS文件覆盖，因此解决方案是

将您的课程添加到// No need for varargs since Kotlin 1.3 fun main() { // Prefer vals over vars val sol = (10..1000). asSequence().// Use asSequence instead of toList filter { lastDigitIsLength(it) }. // Block filter(::no7andNo1). // Method reference toList() println("The number is $sol") } // Don't know what it means, so lets just always return true fun lastDigitIsLength(i: Int) = true // Short notation fun no7andNo1(i: Int): Boolean { return i % 10 == 7 || i % 10 == 1 }文件中。
，或者如果component.scss中的类在类的前面添加styles.scss，例如：

/deep/

Answer 6

openSnackBar(message: string) {
 panelClass: ['ghiles-snackbar'],
}


in style.scss
.ghiles-snackbar {
    background: #2196F3;
  }

小吃吧动态变色角7

6 个答案: