[英]Applying CSS to the Child component is not working
我有一个内部组件,如下所示(即presentation
)。
编辑playlist.html
<ion-grid no-padding>
<ion-row>
<ion-col col-3>
Delete
</ion-col>
<ion-col col-6>
<presentation [data]="d"></presentation>
</ion-col>
<ion-col col-3>
Text desc
</ion-col>
</ion-row>
</ion-grid>
edit-playlist.scss (这里我试图覆盖父级中的孩子的CSS
)
page-edit-playlist {
.content {
presentation .presentation .span-icon {
right: calc(100%-55%);
}
}
}
presentation.html
<div class="presentation">
<span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>
<span class="bottom-text">{{data.text}}</span>
<img [src]="data.imageUrl" [alt]="data.text" />
</div>
presentaion.scss (儿童CSS
)
presentation {
.presentation {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
}
.presentation .span-icon {
position: absolute;
top: 5px;
right: calc(100% - 96%);
color: #fff;
}
.presentation .bottom-text {
position: absolute;
bottom: 16px;
right: calc(100% - 94%);
color: #fff;
}
}
我需要将presentation .presentation .span-icon
应用于子组件。但是你可以看到它不适用。你能告诉我怎么做吗?
注意:但是如果我在element.style
下的浏览器中添加它,那么它可以工作。所以你能告诉我问题在哪里吗?
在操作符和操作数之间放置一个空格,如right: calc(100% - 55%);
正确地工作。
线索:浏览器错误: Invalid property value
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.