Question

我想使用ngx-mat-intl-tel-input，但是我不能设置任何样式。。该按钮占用100％的高度，所有gx-mat-intl-tel-input占用100％的高度。这是我的代码：

.main {
    width: 400px;
    height: 500px;
    border: 1px solid blue;
    margin: 0 auto;
}

.phone {
    border: 1px solid black;
    margin: 300px;
}

ngx-mat-intl-tel-input>div>button {
    margin: 100px;
    background-color: green;
}

form {
    border: 1px solid black;
    width: 100%;
    background-color: green;
}

::ng-deep.mat-menu-panel {
    max-height: calc(100vh - 70vh);
}

.mat-button.mat-blue {
    color: blue;
}

.tp-button-row button,
.tp-button-row a {
    margin-right: 68px;
}

::ng-deep.mat-menu-panel {
    max-width: none !important;
}

::ng-deep ngx-mat-tel-input-container {
    width: 20px;
    border: 1px solid blue;
}

<hr>
<form #f=ngForm [formGroup]="phoneForm">
    <div>
        <ngx-mat-intl-tel-input style="border: 2px solid red; padding: 10px; margin-left: 100px;width: 100px; height: 100px;" [preferredCountries]="[ 'us', 'gb']" [enablePlaceholder]="true" name="phone" formControlName="phone" #phone></ngx-mat-intl-tel-input>
    </div>
</form>

// app.component文件

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  phoneForm = new FormGroup({
    phone: new FormControl('', Validators.required)

  });


  get f() {
    return this.phoneForm.errors;
  }






  ngOnInit() {
    // initialization logic goes here

  }

}

Answer 1

角度使用css封装，这就是为什么不应用样式的原因。

如果gx-mat-intl-tel-input是项目中可用的组件，则需要将CSS放入此组件（在gx-mat-intl-tel-input.component中） .css）就是这样。

如果您无权访问此组件（例如，您从库中获取了该组件），首先需要与浏览器Web工具开发人员一起检查该组件的构建方式。检查已在组件中应用的html和css。

在那之后，您需要使用新规则或覆盖已有规则（！important是您的朋友）来使用已经存在的css玩

您有3个地方可以写CSS：

，在每个规则的前面加上/ deep /，>>>或:: ng-deep来应用css规则。禁用特定规则的CSS封装。问题：不建议使用此方法。
通过使用ViewEncapsulation.None禁用整个组件中的封装：

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
class AppComponent {}

请注意：如果执行此操作，则 app.component.css中的所有css规则将应用于所有项目中。这就是为什么我不建议您这样做，因为这令人困惑：稍后，您将在此组件中应用规则，并且忘记将ViewEncapsulation设置为None。

将CSS放入style.css中，该项目位于项目的根目录中。这将与上述操作相同，这些规则将应用于您的所有项目，但这听起来更合乎逻辑，因为您知道它是全局文件。您还可以使用注释来阐明CSS规则的期望范围，并避免style.css中的混乱

Answer 2

您添加的样式组件在Angular中无法正常工作。

echo $a

如果要设置元素的样式，请先将<ngx-mat-intl-tel-input style="border: 2px solid red; padding: 10px; margin-left: 100px;width: 100px; height: 100px;" [preferredCountries]="[ 'us', 'gb']" [enablePlaceholder]="true" name="phone" formControlName="phone" #phone></ngx-mat-intl-tel-input>内部的内部div或whatever parent element定位为对象，请尝试将样式应用于这些ngx-mat-intl-tel-input。 >

如果仍然无法使用，则可以尝试将class设置为encapsulation。但是它还有其他副作用。您可以详细了解here。

如何设置角材料的样式？

2 个答案: