Angular Material Snackbar 位置

Question

我想将材料小吃店放在我的标题下（它的高度为 60 像素）。

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

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

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'
});