각도 5 재료 스낵바 panel 클래스 구성

Question

Angular Material Snackbar에 panelClass 구성을 추가하려고합니다.

나는 공식 웹 사이트의 문서를 따라 다음 코드를 작성했습니다. 이미 나는 panelClass 설정을 제거하고있는 HTML Button.When에 이벤트를 바인더 제본 한

import { Component, OnInit } from '@angular/core'; 
import { MatSnackBar, MatSnackBarConfig } from "@angular/material"; 
import { Location } from '@angular/common'; 

@Component({ 
    selector: 'snack-bar-component-example', 
    templateUrl: './snack-bar-component-example.html', 
    styleUrls: ['./snack-bar-component-example.css'] 
}) 
export class SnackBarComponentExample implements OnInit { 

    constructor(public snackBar: MatSnackBar) { } 

    ngOnInit() { 
    } 

    saveButtonClick =() =>{ 
    this.snackBar.open("This is a message!", "ACTION", { 
     duration: 3000, 
     panelClass: ["font-family:'Open Sans', sans-serif;"] 
    }); 
    } 
} 

, 다음 기간의 설정은 잘 작동된다. Google 글꼴 (Open Sans)을 가져 와서 해당 글꼴을 Snackbar에 적용하려고합니다. 그러나, 나는 오류를 받고 있어요 :

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('font-family:'Open Sans', sans-serif;') contains HTML space characters, which are not valid in tokens. 

어쩌면, 나는 panelClass을 사용하는 방법을 이해 할 수없는입니다.

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('color: white;') contains HTML space characters, which are not valid in tokens. 

가 어떻게이 오류를 수정하고 작업 일을 얻을 수 있습니다 : 심지어 때 나는

panelClass: ["color:white;"]; 

그것은 여전히 ​​오류가 표시되고,이를 추가하려고? 도와주세요.

PS : 나는 extraClasses 구성으로 알고 있습니다. 하지만 설명서에 서면 사용되지 않으므로 곧 사용되지 않을 예정입니다.

PPS : : 기간 설정이 정상적으로 작동합니다.

Answer 1

panelClass 클래스가 아닌 스타일을 추가하는 데 사용됩니다

panelClass: string | string[]

Extra CSS classes to be added to the snack bar container.

으로 정의된다.

복잡한 CSS 스타일링을 넣어야하는 경우 배열의 크기를 상상해보십시오.

그래서 당신은 CSS에서 스타일을 정의하고 그런 다음에야 당신은 줄에 클래스를 적용 할 필요 구성 요소 SnackBarComponentExample에서

panelClass: ['first-class', 'second-class']; 

Answer 2

시도 :

saveButtonClick =() =>{ 
let config = new MatSnackBarConfig(); 
config.duration = 5000; 
config.panelClass = ['red-snackbar'] 
this.snackBar.open("This is a message!", "ACTION", config); 

}

'red-snackbar'는 앱 메인 styles.css 파일의 클래스입니다. 이상하게도 필자는 config.panelClass를 CSS 파일과 관련된 컴포넌트를 참조 할 때 사용할 수 없었지만 일단 클래스를 기본 styles.css 파일에 넣으면 내 스타일이 snackBar에 올바르게 적용되었습니다.