要正确执行此操作，需要在组件上将“视图封装”设置为“无”：

@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中相同。

把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'
})

验证**@Angular /材料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;
}

截至2019年6月30日，使用Angular Material 8.0.1和Angular 8.0.3，以下SCSS和打字脚本似乎可以覆盖Angular Material snackbar中操作按钮的颜色***，而无需使用！important***：
styles.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'
            }
        }
    ]

我记得在一个项目中与网页设计者一起工作，他们有一个钱罐，如果开发者使用！important语句，他们就必须在里面放一个硬币。）
其他解决方案对我不起作用，除非我设置.cdk-overlay-pane（使用材质11）：

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

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

冤家路窄。

encapsulation: ViewEncapsulation.None

这里有一个stackblick

Angular 10且无特殊技巧：
1.在打开小吃店时使用panelClass，例如：

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

持续时间：0仅用于调试。
1.将此内容写入您的style.css

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

由于css的特殊性，这将是最特殊的规则。

• 请注意，.mat-snack-bar-container和.notif-error之间不应有空格。
• 此规则将应用于同时具有.mat-snack-bar-container和.notif-error类的元素。
• 当您的.notif-error类为空时，这也有效。

使用vw对我来说很有效，无论是在大屏幕上还是在小屏幕上

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

不确定Material是什么时候引入的（从这个线程的所有答案来看，这一定是一个新事物），但是现在可以通过在_snackBar.open（）中传递一个参数来覆盖mat-snack-bar-container的样式，如下所示：
component.ts

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

component.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和！important;但至少不再需要执行ViewEncapsulationNone。