将 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 属性

淘汰赛类绑定在组件中不起作用

Storybook 组件级 css 文件不起作用

ReactJs 中的 CSS 模块 + Ant 设计不起作用

覆盖 JQXWidget css 样式不起作用

Angular-cli 构建生成的 CSS 不起作用