How to add specific styles of an Angular Material component

Question

I am currently using Angular Material for my app, but some styles are overriding the styles of the template I am using. They are actually a lot of classes those who are being affected.

I am trying to just add the styles of the components I need. I personally need BottomSheet and Dialog components from this Angular Material.

I found out that you can add specific styles of Angular Material with their theming option in their documentation, but when I add the styles for BottomSheet and Dialog to my styles.scss files, I don't see anything because I don't have the styles for cdk-overlay-container, but I can't find the scss file with those styles to add them to my styles.scss files.

This is my code in the styles.scss file so far:

@import '~@angular/material/theming';

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

@include mat-bottom-sheet-theme($candy-app-theme);
@include mat-dialog-theme($candy-app-theme);

Any ideas about how to fix this? Thanks!

Answer 1

For those who are facing the same problem, just trying to add a specific component that needs this cdk-overlay-container styles. You just need to add the scss file with this library, just add this to your styles.scss:

@import '~@angular/cdk/overlay-prebuilt.css';