使底片(弹出式)粘着按钮(角质材料)

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
}