2

I've read the documentation about theming in Angular Material.

But what if I want to do some finer adjustments on certain component.

Take Tooltip component for example, I want to make the font size slightly bigger.

I made it working by overriding some classes like this.

.mat-mdc-tooltip .mdc-tooltip__surface {
    font-size: 1rem;
}

But, based on the documentation on CSS Specificity, this way seems deemed to be brittle.

Each CSS declaration has a level of specificity based on the type and number of selectors used. More specific styles take precedence over less specific styles. Angular Material generally attempts to use the least specific selectors possible. However, Angular Material may change component style specificity at any time, making custom overrides brittle and prone to breaking.

Is there a non-brittle way to handle this?

Hao
  • 6,291
  • 9
  • 39
  • 88

2 Answers2

0

No, that is the way you do it. CSS class specificity.

The only thing that will break this is a more specific CSS selector. Your best bet is to wrap the whole thing in a class that you define, one that won't be duplicated by some other class trying to bogart your tooltip style.

This assumes you're looking for a global tooltip style for your app. If it is a specific component you're looking to style, then Angular CSS encapsulation will protect you.

Of course, if someone comes along later with an !important modifier, all bets are off. You should really never use !important, and if someone or some library does, I wouldn't use it/them. The only way you can beat !important is with another !important. It is a road to madness.

FunkMonkey33
  • 1,956
  • 2
  • 16
  • 24
  • https://material.angular.io/guide/theming also states that "Angular strongly discourages, and does not directly support, overriding component CSS outside the theming APIs described above. ", Do I understand it correctly that usage of selectors like ".mat-mdc-tooltip .mdc-tooltip__surface" is what is strongly discouraged? – user656449 May 19 '23 at 11:23
  • 1
    Yes, that is correct. The material team wants you to use the material styles. That's why they put all that work into it. But that rigidity is incongruent with the needs of the web professional, who has stakeholders and customers to think about. – FunkMonkey33 May 20 '23 at 09:26
  • I disagree about `!important`. Creating layer of abstraction, which is your project above library (assuming that library isn't another layer above other library or is using purposefuly "importants" to block your overrides) won't lead to infinite "importants" - there is no point in not recommending some tool just because poor architectural choices/bad practices related to usage of this tool. – Bartłomiej Stasiak Jul 21 '23 at 19:06
0

You can do the following to increase the tooltip font size

@use '@angular/material' as mat;

@include mat.core();

/*

Set up your theme colours, typography etc

*/

$tt-typography: mat.define-typography-config(
  $caption: mat.define-typography-level(20px, 1.4, 400),
);

@include mat.tooltip-typography($tt-typography)
james
  • 4,150
  • 2
  • 30
  • 36