更改覆盖容器的样式

2017-08-10 99 views 3 likes

我使用虚拟键盘的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

来源

2017-08-10 user1025633

回答

使用您component.css ::ng-deep覆盖默认样式。

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

来源

2017-08-10 15:11:03 Faisal

不错。它按预期工作。 – user1025633

酷感谢（y） – christmo

为了能够从您的组件样式覆盖的材料CSS类，你需要将View Encapsulation设置为无您的组件上：

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

来源

2017-08-10 12:46:51

我发现，通过使用主/默认的“Styles.css中”为CDK造型变化（以及材料和动画）都正确地拾起。（警告）我正在使用Angular 4.

来源

2017-10-31 01:53:29

更改覆盖容器的样式

回答

相关问题