嵌套SCSS应用于Angular中的儿童组件时不起作用

发布于 2025-01-18 04:35:42 字数 436 浏览 2 评论 0原文

父级 HTML

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

在子组件中父级的 HTML

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

.scss（在父级组件中应用样式）未重新映射

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心房敞 2025-01-25 04:35:42

这很可能是因为您的样式已封装。解决此问题的一种方法是使用:: ng-deep-pseudo-selector：

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

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

回复收藏 0 原文

~没有更多了~