如何使用包含它的組件的 CSS 為內部 Angular 組件添加邊距

Question

在示例https://material.angular.io/components/expansion/examples中可以看到，材料組件可以使用包含它們的組件的 CSS 來設置樣式：

.example-headers-align .mat-form-field + .mat-form-field {
  margin-left: 8px;
}

當嘗試使用以下方法為我自己的組件添加右邊距時：

.example-headers-align .my-own-component {
  margin-right: 8px;
}

什么都沒有發生:(以上是錯誤的嗎？

上述問題的一個小例子包括：

包含組件my-own-component.component.html ：

<mat-chip-list>
    <mat-chip color="primary" selected>Running</mat-chip>
</mat-chip-list>

父組件my-panel.component.html ：

<mat-expansion-panel class="example-headers-align">
    <mat-expansion-panel-header>
        <mat-panel-title><strong>System 123</strong></mat-panel-title>
        <mat-panel-description>
            22 queues, 2 nodes
        </mat-panel-description>

        <my-own-component></my-own-component>

    </mat-expansion-panel-header>
    More details here ...
</mat-expansion-panel>

...以及父組件my-panel.component.css的樣式定制：

.example-headers-align .mat-expansion-panel-header-title,
.example-headers-align .mat-expansion-panel-header-description {
  flex-basis: 0;
  align-items: center;
}

.example-headers-align .mat-expansion-panel-header-description {
  justify-content: space-between;
}

.example-headers-align {
  margin: 1rem;
}

.example-headers-align .my-own-component {
    margin-right: 3rem;
}

如上所見，沒有應用保證金

有關代碼庫的更多詳細信息，請訪問https://github.com/adelinor/add-margin-example#setup-steps-and-margin-display-issue

提前致謝

Answer 1

嘗試在根文件 styles.css 中添加 styles

我發現當不直接在 html 模板中添加帶有類的組件時，將它們添加到全局 styles.css 中可以使其正常工作

Answer 2

嘗試

    .example-headers-align { position: relative;}

    .example-headers-align .my-own-component {
      margin-right: 8px;
      position: absolute;
     }