Angular中matInput placeholder无法显示红色文本问题求助

嘿，我来帮你搞定这个问题！Angular Material的matInput组件因为自带样式封装机制，直接设置placeholder的样式经常会“失效”——这也是为什么原生input能正常生效，但matInput只有光标变红、文字还是灰色的原因。下面给你几个简单可行的解决方案：

方案1：用深度选择器穿透组件封装 #

在你的组件CSS/SCSS文件里，使用::ng-deep来突破Angular的ViewEncapsulation，直接选中matInput内部的input元素：

/* 让所有matInput的placeholder变红 */
::ng-deep .mat-input-element::placeholder {
  color: red !important;
}

如果只想让特定的matInput生效，可以给input加个自定义类：

<mat-form-field>
  <input matInput placeholder="ZIP" class="zip-placeholder">
</mat-form-field>

然后对应的CSS：

::ng-deep .zip-placeholder::placeholder {
  color: red !important;
}

方案2：全局样式文件中直接设置 #

如果你希望这个样式全局生效，或者不想用::ng-deep，可以直接在项目根目录的styles.css（或styles.scss）里添加样式：

/* 全局生效的matInput placeholder红色 */
.mat-input-element::placeholder {
  color: red;
}

同样，要针对单个input的话，还是给input加类，然后在全局样式里写：

.zip-placeholder::placeholder {
  color: red;
}

小提示 #

原生input能直接生效是因为它没有Angular组件的样式封装，而matInput的内部input元素被包裹在组件模板里，默认情况下组件的样式无法渗透进去。上面的两种方法都是为了绕过这个封装限制，让你的样式能作用到目标元素上。

内容的提问来源于stack exchange，提问作者Moshe Davidi