Override CSS of child component

Question

<div class="app-component">
   <child class="test">{{name}}</child>
</div>

and my CSS styles in child class

.{
   text-align:center;
}

and i did override in parent component i.e in app component as

:host /deep/ .test{
       text-align:right;
        color: red;
     }

so in this code only "color:red" is working fine , but "text-align:right", which i want to override , is not working

Any help is appreciated i want to override the values of predefined Css and add some css also...adding CSS is working but modifying the CSS value is not working

now i did again adding ! important.....it worked now...but i want to know the reason ..why it worked — Deepak Sharma
– Deepak Sharma, Commented Jul 1, 2020 at 10:02

Deepak Sharma · Accepted Answer · 2020-07-01 12:19:00Z

1

:host /deep/ .test{
       text-align:right !important; 
        color: red;
     }

worked for me..

any other solution?

answered Jul 1, 2020 at 12:19

Deepak Sharma

539 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Override CSS of child component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related