Question

我使用MatSnackBar作为我的角度5项目，我似乎无法改变＆＃39;动作的颜色。按钮。

我已将小吃店注入我的HttpInterceptor：

    this.snackBar.open('Invalid Login', 'Ok', {
                    duration: 2000,
                    panelClass: ['my-snack-bar']
                });

我的css：

    .my-snack-bar {
        background-color: #E8EAF6;
        color: #3D5AFE;
    }

如何更改＆＃39;确定＆＃39;动作按钮颜色？

Answer 1

版本：＆＃34; @ angular / material＆＃34;：＆＃34; ^ 5.2.4＆＃34;，

您可以使用panelClass选项+生成的类＆＃34; .mat-simple-snackbar-action＆＃34;来访问颜色。

我的例子：

snackbar.component.ts

  private configSucces: MatSnackBarConfig = {
    panelClass: ['style-succes'],    
  };

  private configError: MatSnackBarConfig = {
    panelClass: ['style-error'],
  };

  public snackbarSucces(message) {
    this.snackBar.open(message, 'close', this.configSucces);
  }

  public snackbarError(message) {
    this.snackBar.open(message, 'close', this.configError);
  }

snackbar.component.css

  .style-succes {
    color: $primary-text;
    background-color: $primary;
  }
  .style-succes .mat-simple-snackbar-action  {
    color: $primary-text;
  }
  .style-error {
    color: $warn-text;
    background-color: $warn;
  }
  .style-error .mat-simple-snackbar-action {
    color: $warn-text;
  }

额外信息如果将mixin用于自定义主题，您可以执行以下操作来获取所有颜色：

@mixin snackbar($theme) {
  $primary: mat-color(map-get($theme, primary));
  $primary-text: mat-color(map-get($theme, primary), default-contrast);
  $warn: mat-color(map-get($theme, warn));
  $warn-text: mat-color(map-get($theme, warn), default-contrast);

  .style-succes {
    color: $primary-text;
    background-color: $primary;
  }
  .style-succes .mat-simple-snackbar-action  {
    color: $primary-text;
  }
  .style-error {
    color: $warn-text;
    background-color: $warn;
  }
  .style-error .mat-simple-snackbar-action {
    color: $warn-text;
  }
}

Answer 2

这对我有用：

.my-snack-bar button {
    background-color: gray;
    color: white;
}

Answer 3

使用此

.my-snack-bar {
    background-color: #E8EAF6;
}

你的style.css（或.scss）文件中的

css。如果放在其他任何地方，它将无法工作。

Answer 4

如上所述，可以使用panelClass配置n自定义小吃店的样式。

this.snackBar.open(message, action, {
            duration: 40000,
            panelClass: "success-dialog"
        });

此处的关键是通过CSS覆盖 mat-simple-snackbar-action 。这将完成更改操作按钮文本颜色的技巧。

.success-dialog {
    color: white !important;
    background-color: $success !important;
    .mat-simple-snackbar-action {
        color: white !important;
    }
}

Answer 5

对我来说，以下代码有效。

::ng-deep snack-bar-container simple-snack-bar .mat-simple-snackbar-action {
  color: black;
}

Answer 6

Steig的答案是正确的，但如果不起作用，则应在班级前面添加/deep/：

/deep/ .my-snack-bar button {
    background-color: gray;
    color: white;
}

Answer 7

在应用tempFile.txt tempFile2.txt文件中，请添加以下内容

style.css

享受！

Answer 8

您可以使用此：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        .btn{
            display: inline-block;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-right: -2px;
        }

        .cta-btn{
            font-size: 1.2rem;
            background-color: #ca5558;
            padding: .9rem 1.8rem;
            color: #fff;
            border-radius: 3rem;
            transition: background-color .5s;
        }

        a.cta-btn:hover,
        a.cta-btn:focus{
                color: black;
                background-color: #c94246 ;
        }
    </style>
</head>
<body>
    <section>
     <div class="container">
         <h2 class="sub-headline">
            <span class="first-letter">W</span>orkouts
         </h2>
         <div class="headline-description">
           
             <div class="single-animation">
                 <h5>Made simpler.</h5>
                   <a href="index.html" class="btn cta-btn">Let's Get Fit</a>
             </div>
         </div>
     </div>
     </section>
    
</body>
</html>

对我有用。

角度5 matsnackbar更改动作按钮颜色

8 个答案: