After creating a component for file preview of audio and video, I decided to use the material dialog. However, I encountered an issue regarding the transparency of the dialog background.
In my SCSS component code, I attempted to set the background color of the dialog container to transparent using the following code:
::ng-deep .mat-dialog-container {
background-color: transparent !important;
}
Although this code worked for all dialogs, I needed it to apply specifically to the dialog within this component.
To achieve this specificity, I tried implementing a service called StyleService with the intention of applying the styles only to this component:
@Injectable({
providedIn: 'root'
})
export class StyleService {
// Service implementation details here
}
I then attempted to utilize the StyleService in the component as follows:
constructor(private styleService: StyleService) {}
ngOnInit(): void {
this.styleService.addStyle('transparent-dialog-theme', require('../../them/dialogStyle.scss'));
}
ngOnDestroy(): void {
this.styleService.removeStyle('transparent-dialog-theme');
}
Unfortunately, despite these efforts, the dialog background still did not appear transparent within the component. Can you help me understand what might be causing this issue and provide suggestions on how to resolve it?