Styles from an scss file are applied to an element, but not the child elements of it

Question

This probably has something to do with Angular Material Chips, but I can't figure out how or why. The actual thing I'm trying to accomplish is different, but here's an illustration. Style gets applied to the mat-chip-row element:

However for the child element, the scss file doesn't even appear anywhere in the style list:

The scss currently looks like this:

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

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

I've tried many variations - no style ever gets applied to any descendant element of mat-chip-row. It doesn't get overridden, it just never appears in the style list. I can edit the styles for those elements in devtools and those are applied. I tried copying the selectors of those elements into the scss - just doesn't get applied. It doesn't seem to be a selector problem. For some reason the file just stops mattering for anything below mat-chip-row.

Answer 1

The span is created/generated outside the component, so the CSS in a component is normally scoped to inside the component.

So you need the css defined to be visible outside the component, you can use ng-deep for this.

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

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