Angular Material 覆盖 SnackBar 组件的默认样式 [英] Angular Material Overriding Default Style of SnackBar Component

问题描述

我试图覆盖 snackbar 组件的默认最大宽度在角材料中.

I am attempting to override the default max-width of the snackbar component in Angular Material.

Angular Material 应用的 CSS 如下图所示:

The CSS applied by Angular Material is shown below:

.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 文件中使用相同的样式进行覆盖，但此样式已被默认样式覆盖.

I have tried overriding using the same style in my style.css file but this style is overridden by the default style.

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

我找到了类似问题的答案，但我知道该问题的答案现在已弃用 (/deep/已弃用).

I have found an answer to a similar question but I know the answer to that question is now deprecated (/deep/ is deprecated).

是否有最佳实践解决方案?

Is there a best practices solution to this?

推荐答案

要正确执行此操作，您需要在组件上将 View Encapsulation 设置为 None:

To do this properly, you need to set the View Encapsulation to None on your component:

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

然后在你的组件 css 中你可以这样做:

Then in your component css you can just do this:

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

来自官方文档:

View Encapsulation = None 表示 Angular 没有视图封装.Angular 将 CSS 添加到全局样式中.范围界定前面讨论的规则、隔离和保护措施不适用.这个本质上与将组件的样式粘贴到HTML.

View Encapsulation = None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

这篇关于Angular Material 覆盖 SnackBar 组件的默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！