无按钮角材质基本小吃吧答案

【问题标题】：Angular material basic snackbar without button无按钮角材质基本小吃吧
【发布时间】：2018-11-16 00:36:55
【问题描述】：

所以 Angular Material 有两种调用 SnackBar 的主要方式。一种方法是调用基本的默认 SnackBar：

snackbar.open('Message archived', 'Undo', {
  duration: 3000
});

另一种方式是将组件称为 SnackBar：

snackbar.openFromComponent(MessageArchivedComponent, {
  data: 'some data'
});

现在我的问题是，我如何调用基本的（不使用组件）但没有'Undo' 按钮。我可以这样做：

snackBar.open('Message archived');

那么我该如何调整持续时间和所有其他属性呢？

https://material.angular.io/components/snack-bar/overview

【问题讨论】：

标签： angular angular-material snackbar

【解决方案1】：

试试这个。

snackbar.open('Message archived', '', {
  duration: 3000,
  extraClasses :['test']
});

为测试类添加样式以便对齐文本。

如果 extraClasses 不起作用，请改用 panelClass

CSS 类。

.test .mat-simple-snackbar{justify-content: center;}

【讨论】：

这样做的问题是您无法将文本置于中心，它仍然为按钮保留空间。你如何应用 text-align: center 这个？
您需要使用 panelClass 而不是 extraClasses。但是现在这并不能解决问题。创建 .test{text-align:center} 不起作用嘿
我们走了，非常感谢你！ :) 只需将您的 extraClasses 更改为 panelClass。 extraClasses 早就被弃用了，根本不起作用。至少不在 stackblitz 上

【解决方案2】：

2020 年更新

接受的答案似乎不再正确。如果有人遇到同样的问题，这对我有用：

像往常一样使用panelClass 属性创建小吃吧。

// xy.component.ts

this.snackBar.open('Message', '', {
    duration: 3000,
    panelClass: ['simple-snack-bar']
}

由于自定义 CSS 已应用于小吃店容器，因此您必须选择 Angular Material 小吃店类来覆盖样式。

/* 
styles.css - if you don't want to use ::ng-deep (what is not recomended),
then you are forced to put your styles in the global scope
*/

.simple-snack-bar .mat-simple-snackbar {
  justify-content: center;
}

【讨论】：