How to style nested childs of component using SASS without using ::ng-deep

Question

I have a component that used ::ng-deep to style its descendents but I'm trying to implement the answer provided here How to style child components from parent component's CSS file?

My component HTML part looks like this

<span class='icm'>
    <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon fontSet="material-icons-outlined" class="aligned-icon">
            more_vert
        </mat-icon>
        <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="showOrderHistory(1234)">
                Order history
            </button>
        </mat-menu>
    </button>
</span>

My component .scss file looks like this

.icm {
    .mat-menu-content:not(:empty){
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .mat-menu-panel {
        min-width: 112px !important;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 4px;
        outline: 0;
        min-height: unset !important;
    }   

    .mat-menu-item {
        font-size: 14px !important;
        height: 32px !important;
        line-height: 32px !important;
    }
}

And the the component.ts has the required line

encapsulation: ViewEncapsulation.None

But the styles are not being applied and I dont want them to be global just applied to any mat-menu that is inside the "icm" span

There is this other very similar question but it does not have accepted answers - How do I style child component from parent's SCSS without ng-deep?

UPDATE

Did you change `encapsulation: ViewEnapsulation.None` in your component's decorator? — AliF50, May 21 '21 at 15:23
It's hard to help without seeing more of the HTML code generated, could you make a screenshot of the developers tools open seeing the HTML code and the css properties. Maybe the rules you defined are not "specific" enough and angular-material has more specific rules... — Tonio, May 21 '21 at 16:30
@Tonio it us correctly spelled I just a typo from a fast edit — Mauricio Gracia Gutierrez, May 21 '21 at 16:38
I have updated the question with the developer tools and HTML being generated — Mauricio Gracia Gutierrez, May 21 '21 at 17:48
Something is wrong... I can't see the "icm" class (the class of your component). Neither can I see the html tag for your custom component (I'm guessing it's something like "". If you can put this in a stackblitz, I'll definitely be able to help. Otherwise, I need to see the HTML where you have the selector of your "icm" component... — Tonio, May 22 '21 at 08:05
@Tonio I will that in a few hours, to my knowledge the angular component tags () are never render in the HTML, they get replaced by the template. HTML knows nothing about the angular components — Mauricio Gracia Gutierrez, May 22 '21 at 14:27
ok I'm pretty sure that's the problem here, by default angular "wrapping tags" are rendered as you can see on this simple stackblitz https://stackblitz.com/edit/angular-jkbsxb?file=src%2Fapp%2Fhello.component.ts However, there are some ways to "prevent" the wrapping tag to be rendered, check this stackoverflow question to see if you're doing any of the things they mention to "remove" the wrapping tag.https://stackoverflow.com/questions/38716105/angular2-render-a-component-without-its-wrapping-tag. — Tonio, May 23 '21 at 05:40
So you have an issue with the wrapping tag but even without it, you should see `` somewhere and I was not able to see it in the sceenshot you provided, this is the key to your issue — Tonio, May 23 '21 at 05:45

score 1 · Answer 1 · answered May 23 '21 at 16:23

It seems you are doing all the right things.

However, the screenshot you provided do not exactly match your component code.

Your component has the following HTML top tag:

<span class='icm'>

But for some reasons, I can't see this in the screenshot you provided. It is very likely that's the issue you're facing. This seem like a weird issue (I can't see a reason why the code of your component is not fully rendered in the HTML page), maybe the solution is the old saying from customer services: "Have you tried to switch it off and on again?".

Sometimes, you save your file but somehow, the node localhost server doesn't pick up the changes and there is a mismatch between the code you see in your IDE and the "compiled" code.

I thought that this was solved, but it turhns out that the parent component still had the ::ng-deep styling — Mauricio Gracia Gutierrez, May 24 '21 at 13:51

How to style nested childs of component using SASS without using ::ng-deep

1 Answers1

Linked