在Angular组件中覆盖Angular材质样式

在Angular组件中覆盖Angular材质样式

问题描述:

我在Angular组件中使用材质2 <md-input-container>.我想覆盖其中一个类在角材料中定义的.mat-input-wrapper.但是我只想覆盖该组件,并且覆盖不应影响页面中的其他组件.

I am using Material 2 <md-input-container> in my Angular component. I want to override one of the classes e.g. .mat-input-wrapper defined in Angular Material. But I want to override only in that component and the override should not effect other components in the page.

这是渲染元素的屏幕截图:

Here is the screenshot of the rendered element:

正如@Dylan指出的那样,您必须使用/deep/来更改子网络中的CSS.这是我一直在寻找的答案:

As @Dylan pointed out, you have to use /deep/ to alter the CSS within the child compoenets. Here is the answer I was looking for:

:host /deep/ md-input-container .mat-input-wrapper