Angular material - how to change font-size in some elements?

0
votes

I use a md-select using Angular 4 with Material, and I can't seem to change the font-size to 14, no matter what I try. There also isn't a style, except in the node-modules, which I don't want to change. I can inspect it with firebug and see that it is mat-select-trigger class that sets the font-size to 16px, but I can't find it anywhere (except in some files inside node-modules).....How can I change the md-select font size to 14px or 12px?

2
angularangular-material2
Can you reproduce this problem with StackBlitz ? - br.julien
It would be too difficult to reproduce, I would have to upload all dependencies probably, and the project is quite complex, I guess. Do you think I can change something inside node_modules? I tried to change some value inside it, and it worked, it solved my problem, but I know that It would be overwritten probably with each update with npm. - Vladimir Despotovic
You shouldn't change the code inside node_modules indeed. This is an example with md-select : stackblitz.com/edit/angular-material2-md-select-issue, do you have the same problem with this example ? - br.julien
It looks I managed to change it by adding this to themes.scss inside the src/styles/themes.scss (not inside node_modules): .mat-select-trigger { font-size:14px; } - Vladimir Despotovic

2 Answers

0
votes

You can fix this by adding a css declaration, like "custom-md-select" to you md-select element

then, in you main global styles file, add ".custom-md-select", and add the new font size you want, there.

This is because the global css applies to all CSS, regardless of view encapsulation of CSS

0
votes

For me, adding an important! tag, together with putting all this in _common.scss solves the problem majority of the times. At the end, I learned to do it like this. If this fails, wrap it with div and style that div's child, keeping the important! tag, and keeping this rule in the _common.scss.