I have an Angular 13 app & a couple of components structure look as below

1. logo component

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

2. header component

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

I'm trying to set the width & height of the svg (logo-component) from the header-component

header.component.css

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

However, this way CSS intended for svg logo is not reflected. How can I apply CSS to such child component from its parent component?

Thanks!

CodePudding user response：

Since component style are encapsulated by default. you should use ::ng-deep to disable view-encapsulation for that rule

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