Customizing component styles

Customizing Angular Material component styles

There are 3 questions to keep in mind while customizing the styles of Angular Material components:

  1. Are your styles encapsulated?
  2. Are your styles more specific than the defaults?
  3. Is the component a child of your component, or does it exist elsewhere in the DOM?
View encapsulation

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.

Selector specificity

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.

Component location

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:

  • Add the overriding style to your global stylesheet. Scope the selectors so that it only affects the specific elements you need it to.
  • Turn view encapsulation off on your component. If you do this, be sure to scope your styles appropriately, or else you may end up incidentally targeting other components elswhere in your application.
  • Use a deprecated shadow-piercing descendant combinator to force styles to apply to all the child elements. Read more about this deprecated solution in the Angular documentation.