angular-material css leaks to other div - html

Question

I want to use Angular Material's md-autocomplete in my angular application. I already have a modified css which my application is using. But adding the angular material css screws up my entire page.
I tried scoping the css to only that div. But still it somehow overrides the parent css also.
This is how I used the css in my page :
<div>
<style>
The whole Angular material css goes here.
(https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css)
</style
</div>
I thought the above would scope the css only to that div. But it somehow leaks to the other divs as well.
Also I tried to remove parts of the original css so that I leave only the styles that the md-autocomplete uses. But this is really tiring and also the results are not great as well.
Please help me how to use the md-autocomplete in my original html file.

Answer 1

what you are trying to do is not possible in css see below code
<div>
<style>
div{
color: red;
}
</style>
some text
</div>
<div>
<style>
div{
border: 1px solid brown;
}
</style>
another text
</div>
earlier it was possible in css with <style scoped> but support for this feature has been dropped.
<div>
<style scoped>
#import "style.css";
</style>
</div>
however you could use CSS preprocessor like less or sass
.your-class {
#include 'style.css';
}
for more details you can refer Link external CSS file only for specific Div
hope i answered your question