Angular2 Material: 添加自定义样式到 md-checkbox

Question

我唯一想要的就是重写 md-checkbox 基本宽度和高度。我不想对所有站点永久执行此操作，只对我添加的一个组件执行此操作 md-checkbox

所以，这是我的组件

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

export class MyComponent {}

还有我的-component.html

 <md-checkbox></md-checkbox>

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

Answer 1

您可以使用 /deep/ 选择器强制您的样式在组件树中向下并进入任何子组件。将深层样式放在组件的样式中 sheet。下面是一个覆盖按钮 material 设计样式的示例。针对相关复选框类.

进行所需的调整应该很容易

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

Angular2 Material: 添加自定义样式到 md-checkbox

Angular2 Material: Add custom styles to md-checkbox

angular

styles

parent-child

angular-material2