我有一个父组件,其中包含一个子组件。父组件具有一些CSS类,而子组件扩展了它们。根据文档,我尝试使用:host,但似乎无法正常工作。
子组件:
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
父组件: <div class="table container">
<div class="table-row header">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<app-child-component></app-child-component>
</div>
父组件 CSS:
:host .table {
display: table;
}
:host .table-row {
display: table-row;
}
:host .table-cell {
display: table-cell;
}
:host .container {
width: 400px;
height: 100vh;
}
:host .header {
background: cyan;
}
:host .body {
background: yellow;
height: 100%;
}
:host .body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
问题在于,即使我在子组件中放置css类,由于有子组件模板存在,布局也会被破坏。因此,主要问题是子组件从父组件继承或扩展css的适当方式是什么?