angular-material css leaks to other div

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