SCSS 7 to 1 in Angular - Incorrect style precedence?-CodePudding

I am currently working on an Angular project using the 7 to 1 SCSS folder structure and Angular Material theming.

Angular material has got a <mat-chip> component and I want to change aspects of the element's styling in some cases.

I have got a main.scss file that pulls in styles from the 7 to 1 subfolders.

@use 'themes/indigo-pink';

@use 'base/base';

@use 'layout/flex';

@use 'components/_mat-card-title';
@use 'components/mat-chip';
@use 'components/h1';
@use 'components/h2';
@use 'components/fieldset';
@use 'components/button';
@use 'components/mat-chip-list';
@use 'components/input';

As you can see I am importing one of Angular Material's default themes first so that any changes I make to the styles will override what's in the theme css file.

My problem is that the classes from 'themes/indigo-pink' seem to take precedence over my class in 'components/mat-chip'.

'components/mat-chip' contains a class called 'mat-static-chip', which the classes from the theme file seem to take precedence over.

Could somebody please explain why that's happening?

CodePudding user response：

First of all, you should avoid changing the style of a library if the library does not offer that.

Not only this does not respect the design system they implemented, it can also somoetimes break the components completely.

I'm not saying you should not, I'm just saying, be careful.

Next, this is due to the priority of your styles. Styles are applied given the precision of their selector.

The base theme uses .mat-chip.mat-standard-chip (2 classes), while you use .mat-static-chip (1 class).

Use this selected instead : mat-chip.mat-chip.mat-static-chip (1 tag, 2 classes). This way, no matter the import order, your style will be applied everytime.