在角度材料中居中文本 MatButtonToggle
An-*_*oid 4 css sass typescript angular-material angular
我正在尝试自定义 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;
}
我怎样才能做到这一点 ？
添加这个：
.mat-button-toggle-label-content{
line-height: 0px !important;
padding: 12px 10px 10px 10px !important
}
到src 文件夹的style.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>
- @JasonPowell 不客气，默认情况下，Angular 组件样式的范围会影响组件的视图。这意味着您编写的样式将影响组件模板中的所有元素。它们不会影响模板中其他组件的子元素。 (2认同)
- @JasonPowell 某些 Angular Material 组件，特别是基于叠加层的组件，如 MatDialog、MatSnackbar 等，不作为组件的子项存在。通常它们被注入到 DOM 的其他地方。记住这一点很重要，因为即使使用高特异性和阴影穿透选择器也不会针对不是组件直接子元素的元素。建议针对此类组件使用全局样式。 (2认同)
我认为你应该为此使用ng-deep 。
::ng-deep .mat-button-toggle-label-content{
line-height: 0px;
padding: 12px 10px 10px 10px;
}
重要的标志始终是一个坏主意，并且通常是一种“不好的做法”。
目前只有一个关于如何替换 ng-deep 的草案，有关更多信息，请点击此处。
更新
您还可以尝试创建一个全局 CSS 文件，并且非常具体地针对您的用例，并将其注册到您的styles.css. 这样，您就可以避免 ng-deep 和 !important 标志。请注意，这可能会覆盖不同的地方。
| 归档时间： |
|
| 查看次数： |
8357 次 |
| 最近记录： |