There are 3 questions to keep in mind while customizing the styles of Angular Material components:
By default, Angular component styles are scoped to affect the component's view. This means that the styles you write will affect all the elements in your component template. They will not affect elements that are children of other components within your template. You can read more about view encapsulation in the Angular documentation. You may also wish to take a look at The State of CSS in Angular on the Angular blog.
Each CSS declaration has a level of specificity based on the type and number of selectors used. More specific styles will take precedence over less specific styles. Angular Material uses the least specific selectors possible for its components in order to make it easy to override them. You can read more about specificity and how it is calculated on the MDN web docs.
Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc., do not exist as children of your component. Often they are injected elsewhere in the DOM. This is important to keep in mind, since even using high specificity and shadow-piercing selectors will not target elements that are not direct children of your component. Global styles are recommended for targeting such components.
Overlay-based components have a panelClass
property (or similar) that can be used to target the
overlay pane. For example, to remove the padding from a dialog:
// Add this to your global stylesheet after your theme setup
.myapp-no-padding-dialog .mat-dialog-container {
padding: 0;
}
this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})
Since you are adding the styles to your global stylesheet, it is good practice to scope
them appropriately. Try prefixing your selector with your app name or "custom". Also note that
the mat-dialog-container
's padding is added by default via a selector with specificity of 1. The
customizing styles have a specificity of 2, so they will always take precedence.
If your component has view encapsulation turned on (default), your component styles will only affect the top level children in your template. HTML elements belonging to child components cannot be targeted by your component styles unless you do one of the following: