如何在Angular 4中删除特定页面的Global styles.css

Question

在我的几个组件中，我需要删除Global styles.css，该组件默认情况下将应用于每个组件。 这是我在"styles"中的angular.cli.json属性：

"styles": [
    "bootstrap-reboot.min.css",
    "styles.css",
    "custom.scss"
 ]

那我该怎么实现呢？

Answer 1

您不能那样做。它们是全球性的。您可以做的是将它们排除在例如styles.css

中

:not(your-component-selector)

和您的custom.scss

your-component-selector {
 //Your component styles goes here
}

您也可以使用：host-context修饰符，但是例如，必须动态添加自定义父类

:host-context(.custom-style) your-component-selector {
  //Your component styles goes here
}

Answer 2

您可以尝试通过在组件css文件中说出这些内容来覆盖组件中的样式

:host yourElementSelector {
  yourPropertyKey: yourPropertyValue !important
}

请注意：：hos​​t和！important都是必需的。

在上面的代码示例中，yourElementSelector应该是该css所在的组件中不存在的东西。