From 83f01fbe23250af1e5f4116f35cf3af49e762e52 Mon Sep 17 00:00:00 2001 From: Captain Caius <241342+captaincaius@users.noreply.github.com> Date: Fri, 21 Dec 2018 16:04:48 +0200 Subject: [PATCH] docs(typography): explain how to restore typical specificity within mat-typography class shows users how to use the mat-typography class to set defaults on elements, but still be able to override the element styles via classes --- guides/typography.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/guides/typography.md b/guides/typography.md index bcbe53242a40..c42f7ac48ab5 100644 --- a/guides/typography.md +++ b/guides/typography.md @@ -55,6 +55,18 @@ descendant native elements. ``` +When applying the `mat-typography` CSS class, the descendent element rule will by default have +higher specificity than the rules based on the CSS classes above. Therefore, if you would like to +be able to override a `mat-typography` descendent element rule using one of the CSS classes, you'll +need to generate rules for the CSS classes as descendents so they'll have higher specificity than +the descendent element rules like so: + +```scss +.mat-typography { + @include mat-base-typography($typography-config, ".mat-typography-tags-override-classes"); +} +``` + ### Customization Typography customization is an extension of Angular Material's Sass-based theming. Similar to creating a custom theme, you can create a custom **typography configuration**.