不遵守Angular 2 CSS优先顺序

Question

在布局页面的中<head>，我具有以下样式：

<link rel="stylesheet" href="/dist/vendor.css">
<style>
    .bg-dark {
        background-color: #240000; 
    }
</style>

我已将链接添加到布局页面。该style块是由Angular和webpack动态添加的。据我对CSS的了解，最后一个.bg-dark类应该胜过.bg-dark`vendor.css中声明的任何类。但是我看到以下内容：

这是由Angular的神奇预渲染引起的吗？有什么办法可以防止这种情况？

Answer 1

将background-color在vendor.css属性有!important标志，提升其优先级：

background-color: #222222 !important;

要覆盖该设置，您应该!important在布局页面CSS中设置标志：

<style>
    .bg-dark {
        background-color: #240000 !important; 
    }
</style>

或删除vendor.css中的该标志（如果可以）。