时间戳

首页 > 解决方案 > Angular：覆盖嵌套组件的scss样式

javascript - Angular：覆盖嵌套组件的scss样式

问题描述

我创建了一个微调器组件。我希望它是独立的，不依赖于外部 css，所以在组件中我包含 css 来设置它的样式。组件模板是一个 div，其类为sbl-circ. 我可以在我的应用程序的任何地方添加它，它可以按设计工作。

现在，我创建了第二个组件（一个按钮）。我想将微调器组件添加到此按钮。它可以工作，但是当它在按钮内时，微调器颜色不正确。

因此，我正在尝试使用按钮组件的 scss 重新着色微调器。到目前为止，唯一可行的方法是如果我这样做

:host ::ng-deep {
  button.btn.btn-primary {
    .sbl-circ {
      color: white;
    }
  }
}

我知道那::ng-deep已被弃用。按钮组件重新着色插入其中的任何微调器组件的正确方法是什么？

标签： javascriptcssangularsass

解决方案

请原谅我对角度的不熟悉。但是，如果我要尝试生成的 css 不会被另一种样式覆盖，我会尝试将其!important用作 scss 中的属性值。
例子： 

p {
    color: red !important;
}

推荐阅读