Component CSS loads before angular material CSS

[qmarquez]

What is the expected behavior?

the CSS rules defined on component CSS have to have more priority than material rules

What is the current behavior?

Material CSS rules override component CSS rules

What are the steps to reproduce?

Using material, icons for example, declared CSS rule don't override the material CSS

Result

Component CSS

To fix it i need to declare the CSS rules as !important

when a CSS rule it's declared on the component CSS it wont must be priority over anothers CSS rules?

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.3.7
Node: 10.13.0
OS: win32 x64
Angular: 7.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.7
@angular-devkit/build-angular     0.13.7
@angular-devkit/build-optimizer   0.13.7
@angular-devkit/build-webpack     0.13.7
@angular-devkit/core              7.3.7
@angular-devkit/schematics        7.3.7
@angular/cdk                      7.3.6
@angular/cli                      7.3.7
@angular/material                 7.3.6
@angular/pwa                      0.13.7
@ngtools/webpack                  7.3.7
@schematics/angular               7.3.7
@schematics/update                0.13.7
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

[jelbourn]

The Angular Material components only style elements that the library owns. Typography styles are only applied to existing elements if you explicitly include the mat-typography class. Aside from that it's not clear what you're referring to.

[qmarquez]

Okey, i found a clearer situation
matLine on a mat-list-item

i want to put gasto.gasto and gasto.valor on a same line, it supose with this class can be done

but the mat-line class loads before my css component class

overwriting my .gastoDetalle class

fixing it just with CSS the only way its ´!important´ing my CSS class

OR adding more HTML (the thing i want to avoid)

the thing is... my CSS class don't have to be more priority over material classes? in other words, the material classes don't have to load after CSS clases defined on my HTML?

Please, if i doing a really bad thing, maybe i thing that is posible but it don't, tellme, maybe the REAL solution it's doing the things well (Adding more HTML but i'm don't knowing)

i hope to be more clear this time

[jelbourn]

Your own component's ViewEncapsulation is your issue. See https://material.angular.io/guide/customizing-component-styles

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}