我怎样才能使::ng-deep仅适用于一个组件

Question

<igx-dialog igxOverlayOutlet #variantDialog class="variant-dialog">
  <div class="dialog-content">
    <div class="variant-options">
      <div class="variant-card">
        <img src="assets/images/variants/color_variant.png" alt="Color Variant" class="variant-image">
        <p class="variant-text">COLOR VARIANT</p>
      </div>
      <div class="variant-card">
        <img src="assets/images/variants/style_variant.png" alt="Style Variant" class="variant-image">
        <p class="variant-text">STYLE VARIANT</p>
      </div>
    </div>
  </div>
</igx-dialog>

SASS 文件

.dialog-content
display: flex
justify-content: center
align-items: center
width: 55vw
height: 55vh

.variant-options
display: flex
gap: 1rem

.variant-card
text-align: center
padding: 1rem
width: 100%
height: 100%
position: relative
background-color: transparent

.variant-image
max-width: 600px
max-height: 600px
border-radius: 15px

.variant-text
font-size: 4rem
line-height: normal
font-weight: bold
position: absolute
top: 30%
left: 5%
color: #3A3A3A

::ng-deep .variant-dialog .igx-dialog__window
background: transparent ! important
box-shadow: none ! important

::ng-deep .variant-dialog .igx-dialog__window 根本不影响 css， 但 ::ng-deep .igx-dialog__window 会影响它。 还尝试使用 :host 但没有解决问题。

主持人 对于 Host 来说，“未知的 CSS 属性‘host’”设置 :host 不再发出警告，而对于 underneeth 主机来说，它说“非法嵌套：只有属性可以嵌套在属性下面”

所以这里的问题是如何在不影响其他 igx-dialogs 的情况下封装它。

Answer 1

:host

标签将确保对话框样式仅应用于组件的子组件，因此 CSS 的作用域仅适用于该组件。

::ng-deep

确保样式到达动态创建的对话框元素。

    :host ::ng-deep .igx-dialog__window {
        background: transparent !important;
        box-shadow: none !important;
    }

Stackblitz 演示

---

如果您在同一个组件上使用多个对话框，那么您可以使用下面的 SCSS，我们首先向对话框添加

id

，以便它是唯一的并且可以设置样式。

<igx-dialog
    #dialog1
    message="This will create a new social media account."
    id="custom-dialog-to-style"
>

然后，我们使用此 ID 以及

::ng-deep

和

:host

使其应用于此元素，然后使用

#custom-dialog-to-style

来定位特定对话框。我们可以使用 CSS Next-sibling (+) Combinator (

+

) 来获取下一个同级，即模态，然后我们向其添加样式。

    :host
        ::ng-deep
        #custom-dialog-to-style
        ~ div.igx-overlay__wrapper--modal
        .igx-dialog__window {
        background: transparent !important;
        box-shadow: none !important;
    }

Stackblitz 演示

最后你的 HTML 可能不正确，因为

igxOverlayOutlet

应该是

igx-dialog

的父元素，我可能是错的，但请使用 stackblitz 作为代码参考。

    <div igxOverlayOutlet class="variant-dialog">
    <button igxButton="contained" igxRipple="white" (click)="openDialog()">
        Show Styled Dialog
    </button>
    <igx-dialog
        #dialog1
        message="This will create a new social media account."
        id="custom-dialog-to-style"
    >
        <igx-dialog-title>
        <div class="dialog-container">
            <igx-icon>account_box</igx-icon>
            <div class="dialog-title">Create a new account?</div>
        </div>
        </igx-dialog-title>
        <div igxDialogActions class="dialog-container dialog-actions">
        <button igxButton="contained" igxRipple="white" (click)="dialog.close()">
            CREATE
        </button>
        <button igxButton="contained" igxRipple="white" (click)="dialog.close()">
            CANCEL
        </button>
        </div>
    </igx-dialog>
    </div>