Использование цвета темы в глобальной теме mixin с ng-deep

Question

Я использую рекомендации по стилю, указанные в https://material.angular.io/guide/theming-your-components

У моего компонента есть поле mat-form-field, где я хочу изменить цвет границы. Если я добавлю стиль ng-deep в файл component.s css, он будет применен в любом случае, как показано ниже:

  :host ::ng-deep {
    mat-form-field.active-field .mat-form-field {
      &-flex {
        border: 2px solid red;
      }
    }
  }

Теперь я хочу, чтобы цвет границы оставался динамическим c и зависел от тема. У меня есть миксин, определенный в my-component-lib.theme.s css, который вызывается из файла глобальной темы приложения. Я попытался поместить в этот миксин тот же стиль, что и:

    @mixin my-component-lib-theme($theme) {
       $primary: map-get($theme, primary);

      .component-container ::ng-deep {
        mat-form-field.active-field .mat-form-field {
          &-flex {
            border: 2px solid lighten(mat-color($primary), 30);
          }
        }
      }
    }

Но он не работает. У меня есть несколько других стилей в миксине, которые не используют ng-deep, и эти стили работают нормально. Так что, похоже, проблема в том, что ::ng-deep в глобальной теме mixin. Как я могу решить это?

Answer 1

Селектор ::ng-deep является псевдоклассом angular -specifi c, который сообщает Angular -Compiler, что следующий CSS должен применяться и к подкомпонентам. Этот селектор не появится в браузере, так как браузер этого не узнает!

Ваш файл глобальной темы, вероятно, включен непосредственно в ваш html как этот <link rel="stylesheet" type="text/css" href="path/to/global/theme.css"> и ничего о нем не знает angular (хотя это, вероятно, SASS / S CSS -компилированный). Просто используйте старый CSS здесь (или SASS / S CSS, если вы используете CLI по умолчанию Angular). Вы можете просто пропустить селектор ::ng-deep здесь, так как ваша глобальная тема в любом случае применяется глобально.