ngx-international-phone-number 无法添加样式答案

【问题标题】：ngx-international-phone-number to cant added stylengx-international-phone-number 无法添加样式
【发布时间】：2020-09-19 14:47:43
【问题描述】：

我为这个ngx-international-phone-number 使用了我的角度项目，我尝试添加样式，但它对我不起作用，任何人都知道如何在此输入上正确添加 css

看看我的图片、按钮和输入字段没有对齐

StackBlitz here

<international-phone-number class="mystyle form-control form-control-sm"  placeholder="Enter phone number" [maxlength]="20" [defaultCountry]="'us'"  name="phone_number" [allowedCountries]="['in', 'ca', 'us']"></international-phone-number>

css

.mystyle .dropbtn {
  background: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
}



 .mystyle .form-control {
   display: block;
   width: 100%;
   padding: 0.4375rem 0;
   font-size: 1rem;
   line-height: 1.5;    margin: 0px 5px;
   color: #495057;
   background-color: rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border: none;
   border-radius: 0;
   box-shadow: none;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

【问题讨论】：

标签： css angular bootstrap-4 ngx-international-phone-number

【解决方案1】：

您需要在样式前添加:host ::ng-deep { *your css* }。并更改app.component.css > app.component.scss https://stackblitz.com/edit/angular-add-style 希望对你有帮助。

【讨论】：

【解决方案2】：

您可以使用 ng-phone-number 代替 ngx-international-phone-number，它基本上是 ngx-international-phone-number 的扩展，但它的更新和维护良好，支持语言，并根据反馈迅速修复问题。标志问题也在这里修复。这是图书馆的链接https://www.npmjs.com/package/ng-phone-number

【讨论】：