오버레이 스타일링

    IgxOverlayService is used to display content above the page content. A lot of Ignite UI for Angular components use the overlay - Drop Down, Combo, Date Picker and more - so it is important to understand how the overlay displays content. To display the content above other elements, the service moves it into a special outlet container (attached at the end of the document's body, by default). This behavior can affect styles scoped to specific container.

    Styling Overlay Components

    In most cases global theme styles are not affected by the overlay outlets. For example, let's take a look at a Drop Down, styled by the global css-vars mixin:

    <!-- overlay-styling.component.html -->
<igx-drop-down #customDropDown height="350px">
    <igx-drop-down-item *ngFor="let item of items" [value]="item.id">
        {{ item.name }}
    </igx-drop-down-item>
</igx-drop-down>

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$my-drop-down-theme: drop-down-theme(
  $background-color: #efefef
);

@include css-vars($my-drop-down-theme);

    The global styles are not generated under a scoped rule and are not affected by any encapsulation, and thus can match any element on the page, including igx-drop-down-item the service moved to the overlay outlet.

    Scoped Component Styles

    When scoping styles for elements that are displayed in the overlay, we need to specify to the position of the overlay outlet in the DOM. CSS rules that are scoped require a specific hierarchical structure of the elements - we need to make sure the overlay content is displayed in the correct context of the styles we want to apply.

    For example, let's take the igx-combo - its item styles use the igx-drop-down theme, because the combo defines its content inside of its own view.

    // overlay-styling.component.scss
@include css-vars($my-drop-down-theme);
    Note

    If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep to apply the styles.

    // overlay-styling.component.scss
:host {
  ::ng-deep { 
    @include css-vars($my-drop-down-theme);
  }
}

    The items in our combo's list are not descendants of our component host - they are currently being displayed in the default overlay outlet, at the end of the document's body. You can change this by using the outlet property in the overlaySettings. The outlet controls where the overlay container should be rendered.

    여기에서 컨테이너를 배치할 요소에 대한 참조를 전달할 수 있습니다.

    <igx-combo [data]="items" valueKey="name" displayKey="name" [overlaySettings]="{ outlet: element, modal: true }">
</igx-combo>

    export class OverlayStylingComponent {
  ...
  constructor(public element: ElementRef) {
  }
}

    이제 콤보의 항목 목록이 구성 요소의 호스트 내부에 올바르게 렌더링되므로 사용자 정의 테마가 적용됩니다.

    Styling The Overlay

    Now that we've covered how ViewEncapsulation works along with the overlay's outlet property, we can take a look at how we can style the overlay's wrapper itself. The overlay-theme exposes a single property - $background-color, which affects the color of the backdrop when the overlay is set to modal: true.

    Global Styles

    오버레이 모달의 스타일을 지정하는 가장 쉬운 방법은 해당 테마를 앱의 전역 스타일에 포함하는 것입니다.

    // styles.scss
$my-overlay-theme: overlay-theme(
  $background-color: rgba(0, 153, 255, 0.3)
);

@include css-vars($my-overlay-theme);

    이제 모든 모달 오버레이의 배경이 보라색 색조를 갖게 됩니다.

    Note

    If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep to apply the styles.

    // overlay-styling.component.scss
:host {
  ::ng-deep { 
    @include css-vars($my-overlay-theme);
  }
}

    Scoped Overlay Styles

    오버레이가 특정 구성 요소 아래 에서만 특정 배경을 갖도록 하려면 테마 범위를 지정할 수 있습니다. 모달 오버레이의 범위를 지정할 때 오버레이 아웃렛을 이동해야 하는데 여기에는 몇 가지 제한 사항이 있습니다. 오버플로 클리핑, Z-색인 및 뷰포트 문제의 위험을 최소화하려면 상위 수준 구성 요소에서만 모달 오버레이용 콘센트를 사용하는 것이 좋습니다.

    // styles.scss
...
.purple {
  @include css-vars($my-overlay-theme);
}

    API References

    Additional Resources