我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码:
<mat-selection-list
[multiple]="false"
[class.selected]="currentItem"
formControlName="itemListControl"
>
<mat-list-option
*ngFor="let item of items"
[value]="item.id"
>
<div style="display: flex; justify-content: space-between; align-items: center">
<div style="display: flex; align-items: center">
{{ item.name }}
</div>
<button mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</div>
</mat-list-option>
</mat-selection-list>
当我在浏览器中检查站点时,我可以看到有一个 16px 的填充,它将按钮移动到列表项内的左侧:
我已经尝试通过将其添加到组件的 scss 文件中来删除它:
.mat-list-item {
padding-right: 0 !important;
}
由于某种原因,这没有任何效果。看起来这甚至根本没有应用于该元素。我做错了什么以及如何摆脱这种填充(不会造成任何潜在的不良副作用)?
请按如下方式使用。会起作用的。
.mat-list-text {
padding-right: 0 !important;
}
谢谢!
步骤1 在您的 component.ts 文件中添加:
encapsulation: ViewEncapsulation.None
步骤2 在你的 css 文件中添加新的类自定义选项:
.mat-list-option.mat-list-option.custom-option {
.mat-list-text {
padding-right: 0px !important;
}
}
步骤3 在您的 .html 文件中将新类添加到您的 mat-list-option 中:
<mat-list-option
...
class="custom-option">
(注:这是在 Angular V15 上测试的)