如何将 parent 的 css 应用到 angular 中的 child 组件

Question

我有一个 Angular 13 应用程序和几个组件结构如下所示

徽标组件

<svg enable-background="new 0 0 2014 1674.641" version="1.1" 
viewBox="0 0 2014 1674.641" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
</svg>

header分量

<div class="appHeader">
   <a href="https://mysite"> 
     <app-logo> </app-logo>
   </a>

我正在尝试从 header-component

设置 svg (logo-component) 的宽度和高度

header.component.css

  .appHeader svg 
   {
    width: 20rem;
    height: 3.5rem;
   }

但是，这种CSS用于svg标志的方式并没有体现出来。我怎样才能将 CSS 从它的 parent 组件应用到这样的 child 组件？

谢谢！

Answer 1

由于默认封装了组件样式。您应该使用 ::ng-deep 为该规则禁用 view-encapsulation

::ng-deep .appHeader svg {
    width: 20rem;
    height: 3.5rem;
 }

如何将 parent 的 css 应用到 angular 中的 child 组件

How to apply css by parent to child component in angular

css

angular

angular13