如何在Angular Material中设置输入框文本颜色？

嘿，我来帮你搞定这个问题！首先直接回答你的核心疑问：用于设置文本颜色的CSS属性就是color。不过你遇到的问题是Angular Material组件的样式封装导致的——你给父容器.example-container加的color:red没法直接穿透到内部的输入框元素上，得针对性调整样式才行。

快速解决方案：样式穿透修改 #

Angular组件默认有样式隔离，我们可以用::ng-deep来打破这个隔离，覆盖Material组件的默认样式。把下面的代码加到你的组件CSS文件里就行：

/* 修改输入框、文本域的输入文本颜色 */
::ng-deep .mat-input-element {
  color: #000; /* 换成你需要的颜色，比如黑色 */
}

/* 如果需要修改占位符的颜色，加上这段 */
::ng-deep .mat-form-field-label {
  color: #666 !important;
}

/* 处理下拉选择框的选项文本颜色 */
::ng-deep .mat-option-text {
  color: #333;
}

精准定位单个容器的样式 #

如果你只想改.example-container这个容器下的表单样式，不想影响全局，可以把选择器写得更精准：

.example-container ::ng-deep .mat-input-element {
  color: blue;
}

为什么你的原代码没效果？ #

你给.example-container设置color:red后，父元素的颜色样式不会自动传递到Angular Material封装的内部元素（比如matInput对应的原生input）上，因为Material组件自己的样式优先级更高，而且有组件样式隔离的机制，所以必须用样式穿透或者自定义主题来调整。

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