How to use one component but with diffrent css files in angular

Question

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

Answer 1

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").

a stackblitz