CODEWITHSUNDEEP
csssassangular-materialcss-selectorsangular12
Veera
Veera

Reputation: 121

Nested scss is not working when applied to the child component in angular

Parent HTML

 <childComponent class="applyToChild"> </childComponent>

In ChildComponent HTML

<p>ABCD</p>
<ul>
<li>
<p> XYZ </p>
<li>
</ul>

.scss of Parent (applying styles in the parent component) is not getting refeleted

 .applyToChild{
    
    p {
    font-size:25px;
    }
    
    ul
  {
      li{
        background-color:blue;
       }
   }
    }

Upvotes: 1

Views: 1149

Answers (1)

robbieAreBest
robbieAreBest

Reputation: 1771

This is most likely because your style is encapsulated. One way around this is to use the ::ng-deep pseudo-selector:

:host ::ng-deep {
    .applyToChild{
        p {
            font-size:25px;
        }
        ul {
            li{
                background-color:blue;
            }
        }
    }
}

Upvotes: 1

Related Questions