Search code examples
cssangularangular13

How to apply css by parent to child component in angular

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 class="appHeader">
   <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!

Solution

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