角度材料 css 泄漏到其他 div

Question

我想在我的 Angular 应用程序中使用 Angular Material 的 md-autocomplete。我已经有我的应用程序正在使用的修改后的 css。但是添加有角度的材料 css 会搞砸我的整个页面。

我尝试将 css 范围限定为仅该 div。但它仍然以某种方式覆盖了父 css。

这就是我在页面中使用 css 的方式：

<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>

我认为上面的内容将 css 仅用于该 div。但它也会以某种方式泄漏到其他 div。

我还尝试删除部分原始 css，以便只保留 md-autocomplete 使用的样式。但这真的很累，而且结果也不是很好。

请帮助我如何在我的原始 html 文件中使用 md-autocomplete。

Answer 1

你想要做的事情在 css 中是不可能的，见下面的代码

<div>
  <style>
      div{
        color: red;
      }
  </style>
  some text
</div>

<div>
  <style>
      div{
        border: 1px solid brown;
      }
  </style>
  another text
</div>

以前可以在 css 中使用 <style scoped>，但已放弃对该功能的支持。

<div>
    <style scoped>
        @import "style.css";
    </style>
</div>

但是您可以使用 CSS 预处理器，例如 less 或 sass

.your-class {
    @include 'style.css';
}

更多详情可以参考Link external CSS file only for specific Div

希望我回答了你的问题