角材质覆盖 SnackBar 组件的默认样式

Question

我正在尝试覆盖 Angular Material 中 快餐栏 组件的默认最大宽度。

Angular Material 应用的 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/ 已弃用）。

对此有最佳实践解决方案吗？

原文由 Tony Scialo 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Andrei Matracaru 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我记得在一个与网页设计师合作的项目中，他们有一个钱罐，如果他们使用 !important 语句，开发人员必须投入硬币。 ;)

其他解决方案对我不起作用，除非我设置 .cdk-overlay-pane（使用材料 11）：

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

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

原文由 Guntram 发布，翻译遵循 CC BY-SA 4.0 许可协议