I have an angular component that is pulled from the library (ts file, css file, html file).I need to use the same component with i.e. its ts file and html file but with a different css file
the library is local so I have access to modify it
Add a comment
|
1 Answer
If your library use a .css outside the component (e.g. all the material angular components) simply enclosed in a div and make a more specific selector. e.g.
<div class="custom">
<button mat-button>Basic</button>
</div>
your styles.css
.custom .mat-mdc-button:not(:disabled){
color:red;
}
Else, you can give a class to your component. After override the .css using selector.class tag{...} in your styles.css
e.g. your component
h1 { color:red;font-family: Lato; }
your .html
<app-component class="custom"></app-component>
//or
<div class="custom">
<app-component class="custom"></app-component>
</div>
And your styles.css
app-component.custom h1{
color:green
}
/**Or**/
.custom app-component h1{
color:blue
}
It's neccesary you use "styles.css" (or another file that change the "global styles").
