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

Question

我为此使用了我的 Angular 元素 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希望对你有帮助。