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

Question

我有一个组件使用 ::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?

更新

Answer 1

看来你做的都是对的。

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

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

<span class='icm'>

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

有时，您保存了文件，但不知何故，节点 localhost 服务器没有获取更改，并且您在 IDE 中看到的代码与“编译”代码之间存在不匹配。