0

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.

v1shnu
  • 2,211
  • 8
  • 39
  • 68

1 Answers1

0

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

Community
  • 1
  • 1
Rahul
  • 4,294
  • 1
  • 10
  • 12
  • I'm planning to use the CSS prepreocessors , But how do I add it to the page on the front end ? will just this be enough ? also in less, it says client side rendering is not suitable for production usage. – v1shnu Nov 28 '16 at 09:39
  • here is basic tutorial you can refer http://www.hongkiat.com/blog/less-basic/ and https://scotch.io/tutorials/getting-started-with-less – Rahul Nov 28 '16 at 09:45
  • can I import a css using less. – v1shnu Nov 28 '16 at 10:00
  • you can include it `@include 'style.css';` – Rahul Nov 28 '16 at 10:06