Style change via CSS without using !important

[vzakharov-rxnt]

We have two types of avatars, normal and primary (as in material term). Normal ones are grey/boring, and primary avatars stand out. Each has its uses.

I do not want to set styles in HTML or TS -- this duplicates code, since all other app styles are set in SCSS. So setting bgColor and fgColor as Angular props is out of question.

My SCSS of the wrapper component currently looks like this

@import '../variables';

:host {
  ::ng-deep {
    .avatar-container {
      .avatar-content {
        font-family: $font-family !important;
        font-weight: bold !important;
        background-color: $bg-control !important; // normal
        color: $text-color !important;
      }
    }
  }

  .primary ::ng-deep .avatar-content {
    background-color: $primary-color !important; // primary
    color: $primary-text-color !important;
  }
}

Notice the need for !important everywhere.

There should be a way to clear styles on the element and let developer customize via CSS. Please implement, much needed.

[Heatmanofurioso]

Hi @vzakharov-rxnt Sorry for the late reply, but I will look into this in the following days and come back to you as soon as possible if I can