css - Angular Material Snackbar 位置

Question

我想在我的标题下放置材料小吃吧（它的高度是 60px）。

问题是verticalPosition 将snackbar 放在顶部并覆盖标题。我试图添加“margin-top：75px”，但上面的区域是不可点击的。（有一个覆盖）

我无法更改 cdk-overlay-pan 的样式，因为我还有其他对话框。

标签： cssangularangular-materialsnackbar

Answer 1

你可以试试这个：

1. 创建一个全局css类来修改Snackbar组件的样式。
2. 在配置选项中设置panelClass属性。

在 global 中添加此样式声明styles.scss：

.my-custom-snackbar {
  margin: 0 !important;
  position: absolute;
  right: 25px;
  top: 60px;
}

然后什么时候SnackBar打开：

this.snackbar.open('Hello the world!', '', {
  panelClass: 'my-custom-snackbar'
});