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

回答

相關問題