Angular используйте инкапсуляцию css, поэтому ваши стили не применяются.
если gx-mat-intl-tel-input - это компонент, доступный в проекте , вам нужно поместить свой css в этот компонент (в gx-mat-intl-tel-input.component. css) и все.
, если у вас нет доступа к этому компоненту (например, вы взяли его из библиотеки), прежде всего вам нужно уточнить у разработчика веб-инструмента браузера, как создается компонент. Проверьте html и css, уже примененные в компоненте.
После этого вам нужно поиграть с css, уже существующим, с применением новых правил или переопределить ранее существовавшее правило (! Важно ваш друг)
У вас есть 3 места для записи css:
в файловом компоненте css, используя ngx-mat-intl-tel-input, примените свои правила css с помощью / deep /, >>> или :: ng-deep перед каждым правилом. Он отключает инкапсуляцию css для определенного правила c. Проблема: этот метод устарел.
отключить инкапсуляцию во всем компоненте с помощью ViewEncapsulation. Нет:
import {ViewEncapsulation} from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
class AppComponent {}
Будьте осторожны: если вы сделаете это, все правила css в app.component. css будут применяться во всем проекте. Вот почему я не рекомендую вам это делать, потому что это сбивает с толку: позже вы примените правило в этом компоненте и забудете, что для параметра ViewEncapsulation установлено значение None.
- Поместите css в style. css, доступный в root вашего проекта. Это будет делать то же самое, что и выше, эти правила будут применяться во всем вашем проекте, но это звучит более логично, потому что вы знаете, что это глобальный файл. Вы также можете использовать комментарии, чтобы пояснить желаемый объем ваших правил css и избежать беспорядка в вашем стиле. css