Css 角材质MatButtonToggle中的居中文本

我正在尝试自定义MatButtonToggle，但难以将标签居中：

模板：

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>
    <div>ET</div>
  </mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

我如何才能做到这一点？

添加以下内容：

.mat-button-toggle-label-content{
  line-height: 0px !important;
  padding: 12px 10px 10px 10px !important
}

到src文件夹的style.css文件

然后在html中删除

：

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>ET</mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

ET
欧点

我想你应该用这个

::ng-deep .mat-button-toggle-label-content{
  line-height: 0px;
  padding: 12px 10px 10px 10px;
}

重要的旗帜总是一个坏主意，通常是一个“标志”

目前只有一份关于如何替换ng deep的草案，以获取更多相关信息

更新 您还可以尝试创建一个全局CSS文件，并且非常特定于您的用例，并将其注册到

styles.CSS

中。有了它，你就可以避开ng深渊和！重要的旗帜。请注意，这可能会覆盖不同的地方

---

你可以找到更多关于这个话题的内容

谢谢你，你帮我省了不少钱here@FatemeFazli这很好用。您能告诉我为什么.mat按钮切换标签内容样式需要在顶层styles.css中吗？如果在组件级别的.css文件中有，为什么它不起作用？@JasonPowell不客气，默认情况下，角度组件样式的范围会影响组件的视图。这意味着您编写的样式将影响组件模板中的所有元素。它们不会影响模板中其他组件的子元素。@JasonPowell某些角度材质组件，特别是基于叠加的组件，如MatDialog、MatSnackbar等，不作为组件的子元素存在。它们通常被注入DOM的其他地方。记住这一点很重要，因为即使使用高特异性和阴影穿透选择器，也不会针对不是组件直接子级的元素。建议将全局样式用于此类组件。@FatemeFazli我明白了。这实际上有助于理解我所遇到的一些其他问题，即风格神秘地没有得到应用。非常感谢！还是比重要好。此外，您应该进一步阅读。因此，我们计划在Angular（对于所有3个/deep/、>>>和：：ng deep）中放弃支持。在此之前，为了更广泛地与工具兼容，最好使用：：ng deep。

::ng-deep .mat-button-toggle-label-content{
  line-height: 0px;
  padding: 12px 10px 10px 10px;
}