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?

推荐答案

要正确执行此操作，您需要在组件上将查看封装"设置为无":

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.

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