子コンポーネントにCSSを適用しても動作しません。

Question

私は以下のような内部コンポーネントを持っています（つまり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> 

編集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; 
    } 
} 

私はあなたがそれはあなたがそれを行う方法を教えてapply.Canていないことがわかりますcomponent.But子供にpresentation .presentation .span-iconを適用する必要がありますか？

注：しかし、私はelement.styleの下にブラウザ内でそれを追加した場合、問題がある場合、それはworks.Soあなたは私を伝えることができますか？

Answer 1

オペレータとオペランドの間に、 right: calc(100% - 55%);のようにスペースを入れて正しく動作させます。

手掛かり：ブラウザのエラー：Invalid property value