更改覆蓋容器的樣式

Question

我使用虛擬鍵盤的git項目（https://ngx-material-keyboard.github.io/demo/）。我有一些問題需要在450 * 250像素的小型設備上運行。

最後，我發現如果使用開發工具直接在Web瀏覽器上修改它，就會在css中發現必要的更改。

現在我必須找到改變來源的正確位置。

將使用angular2-material中的疊加組件來可視化鍵盤。

如果我註釋掉CDK-覆蓋容器的位置，它的工作原理：

.cdk-overlay-container { 
/* position: fixed; */ 
z-index: 1000; 

}

，但我不能從我的角度應用覆蓋這些。 有什麼建議嗎？

Screenshot of changes

Answer 1

使用您component.css ::ng-deep覆蓋默認樣式。

::ng-deep .cdk-overlay-container { 
    /* Do you changes here */ 
    position: fixed; 
    z-index: 1000; 
} 

Answer 2

爲了能夠從您的組件樣式覆蓋的材料CSS類，你需要將View Encapsulation設置爲無您的組件上：

@Component({ 
    templateUrl: './my.component.html' , 
    styleUrls: ['./my.component.scss'], //or .css, depending what you use 
    encapsulation: ViewEncapsulation.None, 
}) 

Answer 3

我發現，通過使用主/默認的「Styles.css中」爲CDK造型變化（以及材料和動畫）都正確地拾起。 （警告）我正在使用Angular 4.