将 CSS 应用于子组件不起作用
Posted
技术标签:
【中文标题】将 CSS 应用于子组件不起作用【英文标题】:Applying CSS to the Child component is not working 【发布时间】:2018-01-26 15:39:11 【问题描述】:我有一个如下所示的内部组件(即presentation
)。
edit-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
下,那么它可以工作。那么你能告诉我问题出在哪里吗?
【问题讨论】:
【参考方案1】:像这样在运算符和操作数之间放置一个空格
right: calc(100% - 55%);
正常工作。
线索:浏览器错误:Invalid property value
【讨论】:
以上是关于将 CSS 应用于子组件不起作用的主要内容,如果未能解决你的问题,请参考以下文章
reactjs 中的组件之间的转换不起作用并且没有应用 css 属性