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

我有一个组件使用了

：ng deep

来设计其子代的样式，但我正在尝试实现这里提供的答案

我的组件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>

.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菜单

还有一个非常类似的问题，但没有公认的答案：

更新

---

看来你做的事情都是对的

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

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

<span class='icm'>

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

---

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

您是否更改了

封装：ViewEnapsulation。在组件的装饰器中没有
？如果没有看到生成的更多HTML代码，很难提供帮助，你能打开开发者工具的屏幕截图看看HTML代码和css属性吗。也许你定义的规则不够“具体”，angular material有更具体的规则…@Tonio it us拼写正确我只是一个快速编辑的输入错误我已经用开发工具更新了这个问题，并生成了HTML，所以你对包装标签有问题，但即使没有它，您应该在某个地方看到
，而我在您提供的sceenshot中看不到它，这是您问题的关键我认为这已经解决了，但事实证明父组件仍然具有：：ng深样式