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

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

我有一个使用 ::ng-deep 为其后代设置样式的组件，但我正在尝试实现此处提供的答案 How to style child components from parent component's CSS file?

我的组件 HTML 部分如下所示

<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>

我的组件 .scss 文件看起来像这样

.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;
    }
}

并且 component.ts 具有所需的行

encapsulation: ViewEncapsulation.None

但是样式没有被应用，我不希望它们是全局的，只是应用于“icm”跨度内的任何 mat-menu

还有另一个非常相似的问题，但它没有接受答案 - How do I style child component from parent's SCSS without ng-deep?

更新

解决方法

看来你做的都是对的。

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

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

<span class='icm'>

但由于某些原因，我在您提供的屏幕截图中看不到这一点。这很可能就是您面临的问题。 这似乎是一个奇怪的问题（我看不出为什么您的组件的代码没有完全呈现在 HTML 页面中），也许解决方案是来自客户服务的一句老话：“您是否尝试将其关闭并又来了？”。

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