Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(typography): explain how to restore typical specificity within mat-typography class #14604

Closed
wants to merge 1 commit into from
Closed

docs(typography): explain how to restore typical specificity within mat-typography class #14604

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions guides/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,18 @@ descendant native elements.
</section>
```

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:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure that it's very clear what the issue is from this paragraph. What do you think about something like this?

Note that by default the mat-typography selectors have a very low specificity which may cause some of your own styling to conflict with them. You can work around it by increasing the selector's specificity.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks very much for the review. So yeah, clearly it's not worded well if it's not clear what the issue is. Sorry for that. Maybe an example would help.

<section class="mat-typography">
  <h1>This header will be styled using the default h1 from the typography configuration.  Hooray!</h1>
  <h1 class="mat-subheading-1">Unfortunately .mat-subheading-1 loses and this looks the same</h1>
</section>

It would be nice to be able to use .mat-typography for sensible defaults, but allow them to be overridden by the built-in classes so you can use the right semantic tags but still be able to style them according to a standard style guide.

And the reason it doesn't work is that the rules look like this:

  .mat-h1, .mat-headline, #{$selector} h1 {
    @include mat-typography-level-to-styles($config, headline);
    margin: 0 0 16px;
  }
  .mat-h4, .mat-subheading-1, #{$selector} h4 {
    @include mat-typography-level-to-styles($config, subheading-1);
    margin: 0 0 16px;
  }

instead of this:

  .mat-h1, .mat-headline, #{$selector} h1, #{$selector} .mat-headline {
    @include mat-typography-level-to-styles($config, headline);
    margin: 0 0 16px;
  }
  .mat-h4, .mat-subheading-1, #{$selector} h4, #{$selector} .mat-subheading-1 {
    @include mat-typography-level-to-styles($config, subheading-1);
    margin: 0 0 16px;
  }

I suggested this in an issue but was told that it's by design. So I thought it would be good to let people know how they can still achieve this setup in the guide.

Sorry for the lonnng explanation!


```scss
.mat-typography {
@include mat-base-typography($typography-config, ".mat-typography-tags-override-classes");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should use single quotes. Also since this is an example, can it use a more concise class name?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool beans. If you folks agree this documentation is even worthwhile I'll change it :).

}
```

### 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**.
Expand Down