CODEWITHSUNDEEP
htmlcssbootstrap-4angular6styling
Deepak Sharma
Deepak Sharma

Reputation: 53

Override CSS of child component

<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

Upvotes: 1

Views: 187

Answers (1)

Deepak Sharma
Deepak Sharma

Reputation: 53

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

worked for me..

any other solution?

Upvotes: 1

Related Questions