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

我唯一想要的是重写md-checkbox底部宽度和高度。我不想永远做它为所有的网站，只是在那里我加入md-checkboxAngular2材质：将自定义样式添加到md-checkbox

所以一个组成部分，这里是我的组件

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

export class MyComponent {}

而我，component.html

<md-checkbox></md-checkbox>

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

来源

2017-02-28 Lunin Roman

请问我的回答工作为你的使用情况？ –

您可以使用/deep/选择器强制您的样式沿着组件树向下进入任何子组件。将深色样式放置在组件的样式表中。下面是一个按钮覆盖材料设计样式的示例。应该很容易地进行调整，以定位相关的复选框类。

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

这应该只被使用，如果你使用仿真ViewEncapsulation（这是默认值）

来源

2017-02-28 18:10:07

其实在你的答案中有一个语法错误，但是谢谢你的建议，我在你提到的链接中找到了正确的答案 –

@LuninRoman啊，我忘记提到这是用SCSS编写的。如果您使用原始CSS，则会显示出现错误。我很高兴你的工作有效 –

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

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

来源

2017-03-01 07:18:49

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

回答

相关问题