Angular Dialog not display default

Question

So I was testing out dialog for angular since I'm learning how to use it and when I tried to run it this happened. Anyone faced this issue before? Didn't get any errors but I'm fair certain this isn't how angular dialogs are supposed to look like. CSS for the modal is also empty but I've messed around to no avail. Unfortunately I'm unable to show the full code as well since it's sensitive.

I'm using Angular Cli: 11.0.1 Angular Materials: 11.0.0

HTML

<p>test-modal works!</p>

CSS

* {
    background: white;
    color: white;
}

Code to call the dialog

export class BuyProductComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

  openBuyOnlineModal() {
    this.dialog.open(TestModalComponent, {
      hasBackdrop: false
    });
    console.log('meow');
  }

  closeModal() {
    this.dialog.closeAll
  }

  ngOnInit(): void { }
}

Answer 1

Try adding this in the style.css file :

.mat-dialog-container {
  background-color: #fff;
  color: #fff;
  overflow: hidden;
}

You can also add it in each css file you need it in using ::ng-deep

You can also provide dialog height and width in th dialog declaration example:

this.dialog.open(DialogComponent, {
  data: {
    //any data
  },
  width: //any width,
  height: //any height
});