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

Question

我为此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;
 }

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

的链接