ViChU ViChU - 12 days ago 9
AngularJS Question

angular-material css leaks to other div

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

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