Angular2材质：将自定义样式添加到md-checkbox

Question

我唯一想要的是重写md-checkbox基本宽度和高度。 我不想永久地为所有网站执行此操作，仅针对我添加@Component({ selector: 'my-component', moduleId: module.id, templateUrl: 'share/grid/my-component.html' }) export class MyComponent {}

的一个组件

所以，这是我的组件

 <md-checkbox></md-checkbox>

和my-component.html

{{1}}

所以显然我必须访问子组件样式，我该怎么做？感谢。

Answer 1

您可以使用/deep/选择器强制将样式放在组件树中以及任何子组件中。将深层样式放在组件的样式表中。这是一个覆盖按钮的材质设计样式的示例。应该很容易进行针对相关复选框类所需的调整。

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

仅当您使用Emulated ViewEncapsulation（这是默认设置）时才应使用此选项

You can read more about ViewEncapsulation and associated styling techniques in the Angular documentation.

Answer 2

这是一个有效的解决方案：

@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 {}