Angular4 開(kāi)發(fā)實(shí)戰(zhàn)：(3) 使用CSS美化組件
- 使用樣式模板
- 使用樣式字符串
// card.component.ts
styleUrls: ['./card.component.scss']
// card.component.scss
.card {
padding: 10px;
box-shadow: 0 0 3px rgba(0,0,0,.2);
margin: 10px 0;
}
styles: ['h5 { font-weight: normal; }']
<app-card>
<h5 style="font-weight: normal">卡頭</h5>
</app-card>
app-card，這就是宿主元素。app-card {
display: block;
margin: 10px 0;
background: #eee;
}
:host {
display: block;
margin: 10px 0;
background: #eee;
}
app-card有背景色啦。display屬性是空字符串的，也就是不占據(jù)空間。:host(.active) {
background: red;
}
:host-context(.theme-blue) {
color: blue;
}
card-header：
// card-header.component.html
<div class="card-header">
卡頭
</div>
app.component.ts中添加：
<app-card>
<app-card-header></app-card-header>
</app-card>
app/components/card/card.component.scss中添加：
.card-header {
font-size: 25px;
}
card-header里的內(nèi)容是不起作用的，只有這樣：
/deep/ .card-header {
font-size: 25px;
}
/deep/就是用來(lái)強(qiáng)制一個(gè)樣式對(duì)各級(jí)子組件的視圖及其內(nèi)容都生效。<style>
div {color: #333;}
</style>
<link rel="stylesheet" href="app.css">
@import 'app.css';
更多建議：