移除ngx-intl-tel-input的[cssClass]后样式变化原因及自定义方法

一、移除[cssClass]后样式变化的原因 #

ngx-intl-tel-input 组件自带一套内置默认样式类，当你设置 [cssClass]="'custom'" 时，组件会把这个类添加到内部容器或输入元素上，同时会替换部分默认样式类的应用逻辑——哪怕你没定义.custom类，这个空类的存在也会改变默认样式规则的优先级，呈现出你截图里的状态。

而移除[cssClass]属性后，组件会自动恢复应用全套自带默认样式，这就是输入框样式产生明显差异（比如高度、边框样式变化）的原因。

二、实际修改组件样式的方法 #

由于Angular的组件样式隔离机制，你在组件本地CSS里写的样式默认无法影响第三方组件内部的DOM元素，需要通过以下方式突破隔离：

1. 使用::ng-deep穿透样式（最常用） #

在组件的CSS文件中，通过::ng-deep强制穿透样式隔离，直接修改组件内部元素的样式：

/* 修改输入框基础样式 */
::ng-deep .ngx-intl-tel-input input {
  border: 1px solid #ccc;
  height: 44px;
  border-radius: 4px;
  padding: 0 12px;
}

/* 如果保留[cssClass]="'custom'"，可以针对.custom类下的元素修改 */
::ng-deep .custom input {
  /* 你的自定义样式 */
}

2. 写在全局样式文件中 #

把样式写在项目根目录的styles.scss（或styles.css）里，全局样式不受组件隔离限制：

.ngx-intl-tel-input input {
  /* 自定义样式 */
}

3. 关闭组件样式隔离（慎用） #

在组件装饰器中设置encapsulation: ViewEncapsulation.None，关闭当前组件的样式隔离，但会导致该组件样式污染全局，需谨慎使用：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent {
  // 组件逻辑
}

附：你的组件代码 #

<ngx-intl-tel-input
     [cssClass]="'custom'"
     [preferredCountries]="preferredCountries"
     [enableAutoCountrySelect]="true"
     [enablePlaceholder]="true"
     [searchCountryFlag]="true"
     [searchCountryField]="[SearchCountryField.Iso2,SearchCountryField.Name]"
     [selectFirstCountry]="false"
     [selectedCountryISO]="CountryISO.UnitedStates"
     [maxLength]="15"
     [phoneValidation]="true"
     [separateDialCode]="false"
     [numberFormat]="PhoneNumberFormat.International"
     [inputId]="'phoneNumber'"
     [customPlaceholder]="'Phone Number'"
     formControlName="phoneNumber">
</ngx-intl-tel-input>

样式对比图 #

添加[cssClass]="'custom'"时的样式：

移除[cssClass]="'custom'"时的样式：

内容的提问来源于stack exchange，提问作者Samuel Veizaga