角度材料 MatButtonToggle 中的中心文本

Posted 2023-03-06

【中文标题】角度材料 MatButtonToggle 中的中心文本

【英文标题】：Center text in angular material MatButtonToggle

【发布时间】：2019-03-07 14:26:43

【问题描述】：

我正在尝试自定义 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-checked 
  background-color: $secondary-color;
  color: white;


mat-button-toggle-group 
  height: 25px;
  border-radius: 4px;
  border: solid 1px $secondary-color;


mat-button-toggle 
  font-size: 15px;
  background-color: white;
  color: $secondary-color;

我该怎么做？

【参考方案1】：

添加这个：

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

到您的 src 文件夹的 styles.css 文件。

在你的 html 中删除 <div> ：

<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>

DEMO

【讨论】：

谢谢你，让我头晕目眩

@FatemeFazli 这很完美。你能告诉我为什么 .mat-button-toggle-label-content 样式需要在顶层 styles.css 中吗？如果在组件级别的 .css 文件中，为什么它不起作用？

@JasonPowell 不客气，默认情况下，Angular 组件样式的范围是影响组件的视图。这意味着您编写的样式将影响组件模板中的所有元素。它们不会影响模板中其他组件的子元素。

@JasonPowell 一些 Angular Material 组件，特别是 MatDialog、MatSnackbar 等基于覆盖的组件，不作为组件的子级存在。通常它们会被注入到 DOM 的其他地方。记住这一点很重要，因为即使使用高特异性和穿透阴影的选择器也不会针对不是组件的直接子元素的元素。建议使用全局样式来定位此类组件。

@FatemeFazli 我明白了。这实际上有助于理解我所遇到的其他一些问题，这些问题神秘地没有得到应用。非常感谢！

【参考方案2】：

我认为您应该为此使用ng-deep。

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

重要的标志总是一个坏主意，通常是“bad practice”。

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

更新

您也可以尝试创建一个全局 CSS 文件，并针对您的用例非常具体，并将其注册到您的 styles.css。这样，您可以避免使用 ng-deep 和 !important 标志。请注意，这可能会覆盖不同的地方。

您可以找到有关该主题的更多信息here

【讨论】：

还是比重要好。此外，您应该进一步阅读。因此，我们计划放弃对 Angular 的支持（对 /deep/、>>> 和 ::ng-deep 的所有 3 个）。在此之前 ::ng-deep 应该是首选，因为它与工具的兼容性更广泛。