ng-deep вызывает проблемы с mat-select в Angular

Question

Я использую mat-select из angular. Я использовал его в 2-х местах.

1. AppComponent
2. ModalComponent

Чтобы стилизовать панель параметров в mat-select, я использовал ng-deep следующим образом:

В app.component. css

::ng-deep .mat-select-panel {
  border-top: none !important;
  min-width: 100% !important; 
  position: absolute;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  margin-left: 17px !important;
  margin-top: -10px !important;
}

Он располагался правильно до тех пор, пока на страницу не был добавлен другой модальный элемент. В этом модальном компоненте ng-deep также используется для стилизации mat-select внутри модального окна. В modal.component. css

::ng-deep .mat-select-panel {
  min-width: calc(100% + 7px) !important;
  position: absolute;
  top: 100px;
  left: 20px;
}

Итак, теперь, когда мы нажимаем на mat-select в модальном компоненте, а затем, если мы нажимаем на mat-select в компоненте приложения, положение коврика -select в компоненте приложения, похоже, находится в другом положении. Кто-нибудь может помочь мне решить эту проблему.

Answer 1

Мне удалось исправить это с помощью класса панели.

<div class="custom">
  <mat-select panelClass="select-panel"></mat-select> 
</div>

Затем в стилях. css

.custom .select-panel{
  min-width: calc(100% + 7px) !important;
  position: absolute;
  top: 100px;
  left: 20px;
}

Answer 2

ng-deep не рекомендуется, поэтому вы должны использовать компонент без инкапсуляции, поэтому:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {}

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class ModalComponent {}

Созданные вами классы css должны инкапсулировать его в div с другим классом и определять их таким образом :

компонент приложения. css

.custom1 .mat-select-panel {
  border-top: none !important;
  min-width: 100% !important; 
  position: absolute;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  margin-left: 17px !important;
  margin-top: -10px !important;
}

компонент приложения. html

<div class="custom1">
  <!-- here mat-select whith class .mat-select-panel -->
</div>

модальный компонент. css

.custom2 .mat-select-panel {
  min-width: calc(100% + 7px) !important;
  position: absolute;
  top: 100px;
  left: 20px;
}

модальный компонент. html

<div class="custom2">
  <!-- here mat-select whith class .mat-select-panel -->
</div>

Для получения дополнительной информации см .:

https://angular.io/guide/component-styles#view -инкапсуляция

https://material.angular.io/guide/customizing-component-styles

https://material.angular.io/guide/theming#defining -a-custom-theme