logo标签列表

将CSS应用于子组件无效。

htmlcsssassflexboxionic3
3

我有一个内部组件，如下所示（即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 应用到子组件中。但是你会发现它没有生效。请问你能告诉我如何解决吗？
请参考以下图片：enter image description here 注意：如果我将其添加到浏览器的 element.style 中，则可以生效。所以你能告诉我问题出在哪里吗？
1个回答
3

在操作符和操作数之间加上空格，像这样right: calc(100% - 55%);，才能正常工作。

提示：浏览器错误：无效的属性值

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接