Как укладывать материал angular?

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

Angular используйте инкапсуляцию css, поэтому ваши стили не применяются.

если gx-mat-intl-tel-input - это компонент, доступный в проекте , вам нужно поместить свой css в этот компонент (в gx-mat-intl-tel-input.component. css) и все.

, если у вас нет доступа к этому компоненту (например, вы взяли его из библиотеки), прежде всего вам нужно уточнить у разработчика веб-инструмента браузера, как создается компонент. Проверьте html и css, уже примененные в компоненте.

После этого вам нужно поиграть с css, уже существующим, с применением новых правил или переопределить ранее существовавшее правило (! Важно ваш друг)

У вас есть 3 места для записи css:

• в файловом компоненте css, используя ngx-mat-intl-tel-input, примените свои правила css с помощью / deep /, >>> или :: ng-deep перед каждым правилом. Он отключает инкапсуляцию css для определенного правила c. Проблема: этот метод устарел.

• отключить инкапсуляцию во всем компоненте с помощью ViewEncapsulation. Нет:

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

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

Будьте осторожны: если вы сделаете это, все правила css в app.component. css будут применяться во всем проекте. Вот почему я не рекомендую вам это делать, потому что это сбивает с толку: позже вы примените правило в этом компоненте и забудете, что для параметра ViewEncapsulation установлено значение None.

• Поместите css в style. css, доступный в root вашего проекта. Это будет делать то же самое, что и выше, эти правила будут применяться во всем вашем проекте, но это звучит более логично, потому что вы знаете, что это глобальный файл. Вы также можете использовать комментарии, чтобы пояснить желаемый объем ваших правил css и избежать беспорядка в вашем стиле. css

Answer 2

Компоненты стилизации не работают таким образом в Angular, как вы добавили.

 <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 es.

Если это все еще не работает, вы можете попробовать установить encapsulation как ViewEncapsulation.None. Но у него есть и другие побочные эффекты. Подробнее об этом можно прочитать здесь .