Angular 5 및 재료 - 스낵바 구성 요소에서 배경색 변경 방법

Angular 5 및 재료 - 스낵바 구성 요소에서 배경색 변경 방법

저는 스낵바 구성 요소에서 배경을 변경해야 합니다.사용자에게 오류 또는 완료된 작업에 대해 경고하거나 알리기 위해 사용합니다.

프로젝트의 재료 버전입니다."@matrix/material": "^5.0.0-rc.1",

문서 https://material.angular.io/components/snack-bar/api 은 클래스를 변경하기 위한 api에 대해 설명합니다.

panelClass: string | string[] 스낵바 컨테이너에 추가할 추가 CSS 클래스입니다.

이것이 제가 css 파일에 추가하는 것입니다.

.mycsssnackbartest {
  background-color: blue;
}

이것은 스낵바를 여는 코드입니다.

this.snackBar.open('Informing the user about sth', 'User Message' , {
    panelClass: ['mycsssnackbartest ']
} );

내가 뭘 잘못하고 있는 거지?

앵귤러 < V15

다음을 사용해야 합니다.panelClass다음과 같은 스낵바에 클래스를 적용하는 옵션(v6 이후):

this.snackBar.open(message, action, {
  duration: 2000,
  panelClass: ['blue-snackbar']
});

CSS(글로벌 스타일.scss):

.blue-snackbar {
  background: #2196F3;
}

Stackblitz 예제 참조

각도 >= v15

Angular 팀은 글로벌 CSS 변수를 추가했습니다.

그래서 당신은 여전히 그것을 추가합니다.panelClass하지만 당신은 이렇게 추가하는 것을 알고 있습니다.

  .mat-mdc-snack-bar-container {
    &.blue-snackbar {
      --mdc-snackbar-container-color: #2196f3;
      --mat-mdc-snack-bar-button-color: #fff;
      --mdc-snackbar-supporting-text-color: #fff;
    }
  }

테마 사용:

기본:

this.snackBar.open('Some message','Some action', {
    duration: 2000,
    panelClass: ['mat-toolbar', 'mat-primary']
});

스위치:'mat-primary'로.'mat-accent'또는'mat-warn'

//in component.ts
this.snackbar.open(message, '', {
    duration: 2000,
    verticalPosition: 'top',
    panelClass: ['warning']
 });
//in component.css
::ng-deep .warning{
   background: 'yellow';
}

네, 글로벌 스타일 파일(.css)에 ::ng-deep를 추가한 후 각 속성 이후에 정상적으로 작동합니다...다음과 같이

noMatchConfig: MatSnackBarConfig = {
    duration: 2000,
    horizontalPosition: 'right',
    verticalPosition: 'top',
    panelClass:['redNoMatch']
  }



::ng-deep .redNoMatch
{
  color:white;
  background: #F44336 !important;
}

가져오기를 통해 전체적으로 이 작업을 수행할 수도 있습니다.MAT_SNACK_BAR_DEFAULT_OPTIONS에app.module.ts:

app.s.ts.

import {
  MatSnackBarModule,
  MAT_SNACK_BAR_DEFAULT_OPTIONS,
} from '@angular/material/snack-bar';

@NgModule({
  providers: [
    {
      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
      useValue: { panelClass: ['mycsssnackbartest'] },
    },
  ],
})

스타일, 스타일, 스타일, 스타일

.mycsssnackbartest {
  background-color: blue;
}

언급URL : https://stackoverflow.com/questions/47560696/angular-5-and-material-how-to-change-the-background-color-from-snackbar-compon