使底部表（弹出窗口）粘在按钮上（角材料）

Question

我有角形项目，我从角形材料添加底部片材，它可以工作。 我试图让打开的弹出窗口粘在按钮上并响应他但它不起作用。

我的主要组件：

import { Component, OnInit } from '@angular/core';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { PopupsDialogComponent } from '../../../modules/home/components/popups-dialog/popups-dialog.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {

  constructor(private _bottomSheet: MatBottomSheet) { }

  ngOnInit() {
  }
  openBottomSheet(): void {
    this._bottomSheet.open(PopupsDialogComponent, {
      panelClass: 'custom-popup'
    });
  }
}

主要组件html： 这是我希望对话框对他来说很粘的按钮

<header>
  <div class="container">
    <button mat-fab class="mat-success" (click)=openBottomSheet()>+</button>
  </div>
</header>

PopupsDialogComponents：

import { Component } from '@angular/core';
import {MatBottomSheetRef} from '@angular/material/bottom-sheet';
@Component({
  selector: 'app-popups-dialog',
  templateUrl: './popups-dialog.component.html',
  styleUrls: ['./popups-dialog.component.sass']
})
export class PopupsDialogComponent {

  constructor(private _bottomSheetRef: MatBottomSheetRef<PopupsDialogComponent>) {}

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }

}

style.css：

.custom-popup
    position: absolute
    top: 95px
    right: 26%
    min-width: 0% !important

非常感谢

Answer 1

最近渲染了一些内置的角度组件， 我认为您可以在 CSS 中处理它，例如：

:host ::ng-deep .custom-popup {
    position: absolute
    top: 95px
    right: 26%
    min-width: 0% !important
}