Angular2材质：将自定义样式添加到md复选框

我唯一想做的就是重新写基宽和基高。 我不想为所有站点永久性地执行此操作，只为添加了

md复选框的一个组件执行此操作

这是我的组件

@Component({
    selector: 'my-component',
    moduleId: module.id,
    templateUrl: 'share/grid/my-component.html'
})

export class MyComponent {}

和my-component.html

 <md-checkbox></md-checkbox>

---

显然，我必须访问子组件样式，我如何才能做到这一点？谢谢。

您可以使用

/deep/

选择器强制您的样式从组件树向下进入任何子组件。将深样式放置在组件的样式表中。下面是一个替代按钮材质设计样式的示例。应该可以很容易地进行针对相关复选框类所需的调整

:host /deep/ {
   .md-button-ripple,
   .md-button-focus-overlay {
      display: none;
   }
 }

仅当您使用模拟ViewEn封装（这是默认设置）时，才应使用此选项

---

您可以使用

/deep/

选择器强制您的样式从组件树向下进入任何子组件。将深样式放置在组件的样式表中。下面是一个替代按钮材质设计样式的示例。应该可以很容易地进行针对相关复选框类所需的调整

:host /deep/ {
   .md-button-ripple,
   .md-button-focus-overlay {
      display: none;
   }
 }

仅当您使用模拟ViewEn封装（这是默认设置）时，才应使用此选项

---

以下是一个有效的解决方案：

@Component({
    selector: 'my-component',
    moduleId: module.id,
    templateUrl: 'share/grid/my-component.html',
    styles: [`:host /deep/ .mat-checkbox-inner-container {
                height:15px;
                width:15px;
            }
    `]
})

export class MyComponent {}

---

以下是一个可行的解决方案：

@Component({
    selector: 'my-component',
    moduleId: module.id,
    templateUrl: 'share/grid/my-component.html',
    styles: [`:host /deep/ .mat-checkbox-inner-container {
                height:15px;
                width:15px;
            }
    `]
})

export class MyComponent {}

---

我的答案适用于您的用例吗？我的答案适用于您的用例吗？事实上，您的答案中存在语法错误，但感谢您的建议，我在您的链接中找到了正确的答案mentioned@LuninRoman啊，我忘了提到这是用SCSS写的。如果您使用的是原始CSS，则会出现错误。我很高兴你的回答中出现了语法错误，但谢谢你的建议，我在你的链接中找到了正确的答案mentioned@LuninRoman啊，我忘了提到这是用SCSS写的。如果您使用的是原始CSS，则会出现错误。我很高兴你把事情办好了