为指定父元素下的mat-slide-toggle-bar设置边距样式无效求助

1. 修复CSS语法错误 #

你的样式代码里多了两个多余的闭合大括号，先修正基础语法：

.parent-element .mat-slide-toggle-bar {
  margin-left: 80px;
}

2. 处理Angular样式隔离限制 #

Angular默认的视图封装机制会给组件样式添加专属属性，导致自定义样式无法穿透到Material组件内部元素，可通过以下方式解决：

方法一：使用::ng-deep穿透样式 #

.parent-element ::ng-deep .mat-slide-toggle-bar {
  margin-left: 80px;
}

方法二：关闭组件视图封装 #

在组件装饰器中关闭视图封装，让样式全局生效（注意避免污染其他组件样式）：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponent {}

方法三：写入全局样式文件 #

将样式放到项目根目录的styles.css（或styles.scss）全局样式文件中，全局样式不受视图封装限制：

.parent-element .mat-slide-toggle-bar {
  margin-left: 80px;
}

3. 提升样式优先级（可选） #

如果以上方法仍不生效，可通过增加选择器权重或使用!important强制生效（优先用权重提升，尽量少用!important）：

.parent-element.mat-slide-toggle .mat-slide-toggle-bar {
  margin-left: 80px !important;
}

内容的提问来源于stack exchange，提问作者Coder-Meca