Angular SnackBar 組件的材質覆蓋默認樣式

Question

我試圖覆蓋 Angular Material 中snackbar組件的默認最大寬度。

Angular申請的CSS材料如下圖：

.mat-snack-bar-container {
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    margin: 24px;
    max-width: 568px;
    min-width: 288px;
    padding: 14px 24px;
    transform: translateY(100%) translateY(24px);
}

我曾嘗試在我的 style.css 文件中使用相同的樣式進行覆蓋，但此樣式已被默認樣式覆蓋。

 .mat-snack-bar-container {
   max-width: 800px;
 }

我找到了類似問題的答案，但我知道該問題的答案現在已棄用（/deep/ 已棄用）。

是否有最佳實踐解決方案？

Answer 1

要正確執行此操作，您需要在組件上將 View Encapsulation 設置為 None：

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

然后在您的組件 css 中，您可以這樣做：

.mat-snack-bar-container {
   max-width: 800px;
}

來自官方文檔：

View Encapsulation = None 表示 Angular 不做視圖封裝。 Angular 將 CSS 添加到全局樣式中。 前面討論的范圍規則、隔離和保護措施不適用。 這本質上與將組件的樣式粘貼到 HTML 中相同。

Answer 2

把css放在你的styles.scss或styles.css

.snackbar {
    max-width: 90% !important;
    margin-left: auto !important; // center align from left
    margin-right: auto !important; // center align from right
    margin-bottom: 1rem !important; 
    padding: 10px !important; // spacing between the text and boundary
    background-color: green;
    color: white;

    .mat-button-wrapper {
        color: black !important; // action text color
    }
}

注意：確保您已為每種樣式設置了!important ，沒有它，樣式將無法工作。

在component.ts

this.snackbar.open(this.resMsg.message, 'OK', {
    panelClass: 'snackbar'
})

Answer 3

已驗證@angular/material v7.0.x ：

CSS !important 修飾符可以解決問題。

把這是 src/styles.scss （應用程序的全局 css）：

.mat-snack-bar-container {
  max-width: 100% !important;
}

我們還調整了它的字體：

/* Overrides SnackBar CSS in Material Design's .mat-simple-snackbar class */
/* Original sizes: font: 24px, height: 47.952px */ 
.mat-simple-snackbar {
  display: flex; 
  font-size: 28px !important; // 28px  is double, 42px for triple
  min-height: 70px !important; // 70px for double, 90px for triple
  align-items: center !important;
  justify-content: center !important;
}

Answer 4

截至 2019 年 6 月 30 日，使用 Angular Material 8.0.1 和 Angular 8.0.3，以下 SCSS 和打字稿似乎可用於覆蓋 Angular Material 小吃欄中操作按鈕的顏色* 不使用 !important * ：

style.scss（不是非常長的持續時間，它允許我在樣式消失之前檢查它）：

$snackBarTextColor: white;
$snackBarBackgroundNormal: #087a51;
$snackBarActionColor: lightgray;
.snackBarInfo {
    background-color: $snackBarBackgroundNormal;
    color: $snackBarTextColor;


}
.mat-simple-snackbar > span {
    font-weight: bold;
}
.mat-simple-snackbar-action {
    .mat-button {
        .mat-button-wrapper {
            color: $snackBarActionColor;
        }
    }
}

app.module.ts:

import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
providers: [
        {
            provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
            useValue: {
                duration: 41000,
                horizontalPosition: 'center',
                verticalPosition: 'bottom',
                panelClass: 'snackBarInfo'
            }
        }
    ]

Answer 5

不確定 Material 是什么時候引入這個的（從這個線程的所有答案來看，這一定是一個新事物），但是你現在可以通過在 _snackBar.open() 中傳遞一個參數來覆蓋 mat-snack-bar-container 的 styles ，就像這樣:

組件.ts

openSnackBar(message: string, action: string) {
    this._snackBar.open(message, action {
        panelClass: 'my-custom-container-class',
    });
  }

組件.scss

::ng-deep .my-custom-container-class{
    max-width: 100% !important;
    min-width: 0% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 32px !important;
    box-shadow: none;
}

恐怕你仍然必須使用 ng-deep 和;重要的。 但至少您不再需要執行 ViewEncapsulation None。

Answer 6

要走的路。

encapsulation: ViewEncapsulation.None

這是一個stackblick來演示

Answer 7

Angular 10，沒有特殊技巧：

1. 打開小吃店時使用 panelClass，例如：

this.snackBar.open("VeryLongTextWithoutThePossibilityOfBreakingAutomatically", "X", {
    duration: 0,
    panelClass: 'notif-error'
});

持續時間：0 僅用於調試。

2. 把它寫進你的 style.css

.notif-error {
    background-color: red;
}
.mat-snack-bar-container.notif-error {
    max-width: 100%;
}

現在由於 css-specificity，這將是最具體的規則。

• 請注意 .mat-snack-bar-container 和 .notif-error 之間不應有空格。
• 此規則將適用於同時具有 .mat-snack-bar-container 和 .notif-error 類的元素。
• 當您的 .notif-error 類為空時，這也適用。

Answer 8

在大屏幕和小屏幕上使用vw適合我

    .mat-snack-bar-container {
    margin-right: auto !important;
    margin-left: auto !important;
    width: 80vw !important;
    max-width: 100vw !important;
}

Answer 9

我記得在一個與網頁設計師一起工作的項目中，他們有一個錢罐，如果開發人員使用 !important 聲明，他們必須在其中投入一枚硬幣。 ;)

其他解決方案對我不起作用，除非我設置了 .cdk-overlay-pane（使用材料 11）：

.cdk-overlay-pane {
    width: 100%;
}

.mat-snack-bar-container {
    max-width: 100%;
    width: 100%;
}

Answer 10

僅供參考，從 Angular Material v15 開始遷移到 MDC，class .mat-snack-bar-container已重命名為.mat-mdc-snack-bar-container

從 v15 開始，我還必須使用一些新的內部 MDC snackbar 類來正確地重新着色 snackbar：

SCSS：

// Classname used in the MatSnackBarConfig obj of MatSnackBar.open():
// panelClass: ['my-snackbar-class']

my-snackbar-class.mat-mdc-snack-bar-container {
  .mdc-snackbar__surface {
    // Background color of entire snackbar:
    background-color: red;

    .mdc-snackbar__label {
      // Color of snackbar text:
      color: white;
    }

    button {
      // Color of snackbar button text:
      color: white !important;
    }
  }
}