I am attempting to override the default max-width of the snackbar component in Angular Material. The CSS applied by Angular Material is shown below: .mat-snack-bar-container { border-radius: 2px; box-sizing: border-box; display: block; margin: 24px; max-width: 568px; min-width: 288px; padding: 14px 24px; transform: translateY(100%) translateY(24px); } I have tried overriding using the same style in my style.css file but this style is overridden by the default style. .mat-snack-bar-container { max-width: 800px; } I have found an answer to a similar question but I know the answer to that question is now deprecated (/deep/ is deprecated). Is there a best practices solution to this? Continue reading...
