如何在不使用 ::ng-deep 的情况下使用 SASS 为组件的嵌套子项设置样式

问题描述

我有一个组件使用 ::ng-deep 为其后代设置样式，但我正在尝试实现此处提供的答案

解决方案

看来你做的都是对的.

但是，您提供的屏幕截图与您的组件代码不完全匹配.

您的组件具有以下 HTML 顶部标记:

但由于某些原因，我无法在您提供的屏幕截图中看到这一点.这很可能就是您面临的问题.这似乎是一个奇怪的问题(我看不出为什么您的组件的代码没有完全呈现在 HTML 页面中)，也许解决方案是来自客户服务的一句老话:您是否尝试将其关闭?并重新开始?".

有时，您保存了文件，但不知何故，节点本地主机服务器不接受更改，并且您在 IDE 中看到的代码与已编译"的代码之间存在不匹配.代码.

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

解决方案

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.

这篇关于如何在不使用 ::ng-deep 的情况下使用 SASS 为组件的嵌套子项设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！