无法将简单CSS应用于angular Materials元素

闪电战

我正在尝试将CSS

color:blue

应用于带有class

mat按钮切换标签内容的div，但它没有得到应用

类似的CSS正在成功地应用于名为
mat button toggle group
的父元素，原因很多

您的CSS可能未正确插入代码中
材料设计的顺序CSS取代了CSS的顺序
我的解决方案是，你可能需要把！重要后色：蓝色

它是：颜色：蓝色！重要的
 只需将颜色应用于
mat按钮切换
并将其保留在
mat按钮切换组中

工作
您可以将样式应用于
.mat按钮切换标签内容
，但需要中断
封装

组件样式被封装。您不能从组件外部访问组件的样式（类、ID）。您需要插入该组件并注入如下样式

注意：/deep/已弃用，不再推荐。因此，您可以使用上述方法。有关更多详细信息，请查看

只需将其移动到
styles.scss
，它就会工作。
！重要的是不工作。您可以检查我链接到的StackBlitz代码，并进行更改以更正错误issue@Daud让我check@Daud，在Chrome上检查了它，我没有看到任何带有颜色的CSS：蓝色应用于带有类mat按钮切换标签内容的div标记，请检查源代码中的CSS，它不是导入或放置的属性。我很确定为什么我不能直接应用到div？如果我在页面加载后通过开发者工具进行操作，就会应用颜色。换句话说，为什么这不起作用：
.mat按钮切换标签内容{color:blue！important}
@Daud组件样式被隐藏，您需要打破视图封装，因此更新了我的答案，并解释了您的问题谢谢。现在更清楚了。实际上，我想用class
mat按钮切换标签内容来设置（生成的）div的
行高
属性。我无法按照您的建议在
mat button toggle
上应用此属性来控制它，因为材质将div的默认行高设置为36px，并且它会覆盖我在
mat button toggle label content
上设置的内容，为什么它在当前设置中不起作用？所有其他样式都可以通过特定于组件的CSS应用。。那么为什么不呢？这是一个时间问题，当你把它放在styless.css中时，这个自定义css的执行发生在材质默认样式的执行之后，所以它会覆盖它。
mat-button-toggle-group {
  background-color: orange;

  mat-button-toggle { 
    color: blue;
  }
}

mat-button-toggle-group {
  background-color: orange;

  /deep/ .mat-button-toggle-label-content {
      color: blue;
  }
}