Angular Material Chips子元素无法加载SCSS自定义样式问题求助

大家好，最近在折腾Angular Material Chips的样式时遇到了个头疼的问题，想请教下各位大佬！

这个问题应该和Angular Material Chips的内部结构有关，但我实在摸不着头绪。我实际要实现的功能不是这个，但下面这个例子能精准描述我的困境：

• mat-chip-row元素能正常加载我的自定义样式
• 但它的子元素（比如mdc-evolution-chip里的span），我写的SCSS规则压根没出现在浏览器的样式列表里——不是被其他样式覆盖了，是完全没加载进去！

我当前的SCSS代码是这样的：

.message-reaction {
  & .mdc-evolution-chip-set .mdc-evolution-chip {
    margin: 2px;
    height: 28px;

    & span {
      padding-left: 0px;
      background-color: red;
    }
  }
}

我试过好几种写法变体，但不管怎么调整，mat-chip-row的后代元素就是加载不到我的自定义样式。有没有朋友遇到过类似的情况，或者能给我指个方向？

备注：内容来源于stack exchange，提问作者Kristaps Baumanis