0

我有以下组件设置

devis.component.ts


@Component({
  selector: 'app-devis',
  templateUrl: './devis.component.html',
  styleUrls: ['./devis.component.scss']
})
export class DevisComponent implements OnInit { }

devis.component.html

<mat-horizontal-stepper>
    <mat-step label="First step">
        <div style="height: 100%">
            content 1
        </div>
    </mat-step>
    <mat-step label="Second step">
        <div style="height: 100%;">
            content 2
        </div>
    </mat-step>
    <mat-step label="Last step">
        <div id="content" style="height: 100%;">
            content 3
        </div>
    </mat-step>
</mat-horizontal-stepper>

我希望步骤的内容是全高的，但在那之前，它不能。

所以我添加了以下 css 规则并将其设置viewEncapsulation为None.

devis.component.scss

mat-horizontal-stepper {
    height: calc(100% - 5rem);
}
.mat-stepper-horizontal .mat-horizontal-content-container {
    height: calc(100% - 72px) !important;
    padding: 0 !important;
    .mat-horizontal-stepper-content {
        height: 100%;
    }
}

然后第一步正确地获得了样式。但是当我移动到其他步骤时，什么都没有。

这mat-horizontal-stepper是 100% 的高度，但它的内容甚至没有显示。在检查器中可以看到 #content 上的内联样式，但不应用包含它的所有内容。

4

1 回答 1

0

您只需要使用::ng-deep来定位此特定组件。如果你放 viewEncapsulation:None这会泄漏你的样式并最终错过其他组件的样式（这就是为什么它被认为是一种不好的做法）

:host {
  ::ng-deep .mat-horizontal-content-container {
      height: calc(100% - 72px);
      padding: 0;
      background: orange;
  }
}

工作演示

于 2020-06-12T08:30:50.117 回答