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

Posted 2023-02-18

【中文标题】角材质覆盖 SnackBar 组件的默认样式

【英文标题】：Angular Material Overriding Default Style of SnackBar Component

【发布时间】：2018-05-25 14:49:43

【问题描述】：

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

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;
 

我找到了similar question 的答案，但我知道该问题的答案现在已弃用（/deep/ 已弃用）。

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

【问题讨论】：

.mat-snack-bar-container max-width: 800px!important;

我已经尝试避免使用 !important 标签，因为它们也可能被认为是不好的做法

在这种情况下，您需要在使用零食的地方添加组件名称 your-component-tag .mat-snack-bar-container max-width: 800px;

Override Angular Material style in Angular component的可能重复

我个人会使用 ng-deep。特别是如果有人要使用我的组件。 ViewEncapsulation.None 本质上是用样式更新您的 styles.css 文件，实际上可能会导致更多混淆样式的来源。我考虑ViewEnapsulation.None 的唯一用途是在初始化特定组件时在整个页面上动态加载一些样式。 Angular 使用的示例假设您的项目中没有 styles.css，如果您使用的是 CLI，那么您有。

【参考方案1】：

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

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

.cdk-overlay-pane 
    width: 100%;


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

【参考方案2】：

使用vw 对我有用，无论是大屏幕还是小屏幕

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

【参考方案3】：

将 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'
)

【参考方案4】：

Angular 10 并且没有特殊技巧：

在打开snackbar时使用panelClass，例如：

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

duration: 0 仅用于调试。

将此写入您的 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 类为空时，这也有效。

【参考方案5】：

要走的路。

encapsulation: ViewEncapsulation.None

这里有一个stackblick 来演示

【参考方案6】：

截至 2019 年 6 月 30 日，使用 Angular Material 8.0.1 和 Angular 8.0.3，以下 SCSS 和 typescript 似乎可以覆盖 Angular Material 快餐栏中操作按钮的颜色*不使用 !重要*：

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'
            
        
    ]

【讨论】：

你也可以使用持续时间 0，它会保持打开状态。我也认为不通过持续时间是一样的。

【参考方案7】：

已针对 @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;

【参考方案8】：

要正确执行此操作，您需要在组件上将 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。