css - 使底部薄片(弹出框)粘在按钮上( Angular Material )

Question

我有 Angular 元素，我从 Angular Material 添加底板并且它工作。我试图让打开的弹出窗口粘在按钮上并响应他，但它不起作用。

我的主要组成部分:

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>

弹出对话框组件:

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

}

样式.css:

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

非常感谢

Answer 1

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

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