angular - 以角度更改 intl-tel-input 字段宽度

Question

我在我的 Angular 应用程序中使用了Nebular ngx-admin 模板。还使用ng2-tel-input进行手机号码输入。我有以下 HTML 代码

<div class="form-control-group">
          <label class="label" for="input-mobile">Mobile<span class="text-danger"> *</span></label>
          <input nbInput type="text" id="input-mobile" class="input-mobile" name="mobile" placeholder="Mobile" fullWidth fieldSize="large" formControlName="mobile" inputmode="numeric" digitOnly [status]="status(formcontrols.mobile)"
            ng2TelInput [ng2TelInputOptions]="{initialCountry: 'in'}">
</div>

但是在构建 Angular 应用程序之后。它看起来像下面的代码。我是通过浏览器中的开发者工具找到的

问题：

无法像上图所示的其他字段一样更改输入字段的宽度。

试过了

我已经直接在开发人员工具中更改了 iti 类的宽度，如下所示

.iti {
width:100%;
}

它运作良好。但我不能从样式文件中应用宽度属性，如下所示

在组件.scss

.iti {
  width: 100%;
}

Answer 1

它终于为我工作了。我用过以下，

在组件.scss

:host ::ng-deep .iti {
  width: 100%;
}

这样做的原因

由于 Angular 中的样式封装，未应用样式。有关更多信息，请参阅此链接。

Answer 2

它对我有用。我在 component.css 中添加了以下代码

.iti--allow-dropdown {
  width: 100%;
}