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

Question

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

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

<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;
 }

Answer 1

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

Answer 2

您可以使用 ng-phone-number 而不是 ngx-international-phone-number，它基本上是 ngx-international-phone-number 的扩展，但它已更新并得到良好维护，具有语言支持，并根据反馈迅速修复问题。标志问题也在这里修复。这是库 https://www.npmjs.com/package/ng-phone-number

的 link

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

ngx-international-phone-number to cant added style

css

bootstrap-4

angular

ngx-international-phone-number