Могу ли я выделить стили усиления-аутентификатора? - PullRequest
0 голосов
/ 16 февраля 2019

Чтобы применить соответствующие стили к компоненту <amplify-authenticator>, я следовал следующим инструкциям: https://github.com/aws-amplify/amplify-js/issues/1870

Это означает установку @ aws-ampify / ui и импорт таблиц стилей.

Однако эти таблицы стилей содержат неопределенные селекторы, которые изменяют такие элементы, как span и h3.Я не хочу, чтобы стили аутентификатора определяли стили всего моего приложения (или наоборот).

Есть ли способ ограничить эти стили, чтобы они применялись только к определенному дереву компонентов?

ViewEncapsulation выглядит как ответ, но, похоже, он не обеспечивает правильного ограничения, так как я использую импортированный компонент, который я не контролирую.

Использование Angular 7.

1 Ответ

0 голосов
/ 27 июня 2019

Это не красиво, но мне удалось сделать это, добавив это в таблицу стилей компонента:

::ng-deep {
  @import '~@aws-amplify/ui/src/Theme';
  @import '~@aws-amplify/ui/src/Angular';
  @import '~@aws-amplify/ui/dist/style';
}

Обратите внимание, это работает только при использовании Angular и Sass / SCSS.Из того, что я понимаю, поддержка глубоких селекторов скоро исчезнет

...