У меня проблема с моим пользовательским элементом angular. Я бы хотел переопределить весь стиль моих компонентов с помощью файла css. Я также использую bootstrap в своем проекте, который импортируется в мой родительский компонент, например так:
styleUrls: ['./chat-parent-component.component.scss', '../../../styles/bootstrap.min.css'],
encapsulation: ViewEncapsulation.None
это работает нормально, но сейчас у меня проблема с bootstrap. Он также распространяется на всю страницу (не только на мой виджет), я думаю, это потому, что для инкапсуляции установлено значение «Нет». Проблема в том, что если я удалю эту ViewEncapsulation, я не смогу переопределить какие-либо стили в своем виджете (пользовательский элемент), и мои стили будут повреждены (вообще не bootstrap).
Вот как я переопределяю все элементы в моем внешнем css файле: ex.
body .chat-button-popup-revealed {
box-shadow: 0 0 20px #00000029;
}
Знаете ли вы, как я должен стилизовать и закрыть этот стиль только в элементе angular? Спасибо!