AngularJS Material输入框文本颜色CSS修改失败，求排查解决方法

嘿，我来帮你搞定这个问题～你遇到的情况是因为AngularJS Material的输入组件自带了一套优先级较高的样式，直接用内联style经常会被组件的内置CSS类覆盖，所以才没生效。下面给你两种靠谱的解决方案：

方案一：使用自定义类+高优先级CSS选择器 #

首先给你的输入容器加一个自定义类，比如custom-title-input，然后通过CSS精准定位到输入框元素，这样样式优先级就能覆盖组件的默认样式了。

HTML代码： #

<md-input-container class="custom-title-input">
  <label>Title</label>
  <input ng-model="user.title">
</md-input-container>

CSS代码： #

/* 修改输入框文本颜色 */
.custom-title-input input.md-input {
  color: #e52973;
}

/* 可选：修改label的颜色 */
.custom-title-input label {
  color: #e52973;
}

如果还是被覆盖，可以尝试加上!important（尽量少用，但紧急情况可以救场）：

.custom-title-input input.md-input {
  color: #e52973 !important;
}

方案二：覆盖组件的状态样式 #

AngularJS Material的输入框会根据状态（比如聚焦、有内容）添加不同的类，如果你需要在所有状态下都保持自定义颜色，可以覆盖这些状态类的样式：

/* 默认状态 */
.custom-title-input input.md-input {
  color: #e52973;
}

/* 输入框聚焦时 */
.custom-title-input input.md-input.md-focused {
  color: #e52973;
}

/* 输入框有内容时 */
.custom-title-input input.md-input.md-not-empty {
  color: #e52973;
}

为什么内联style没用？ #

AngularJS Material会自动给<input>元素添加md-input类，还会根据交互状态动态添加md-focused、md-not-empty等类，这些类的CSS选择器优先级和内联style相当，甚至在某些情况下更高，导致你的内联样式被覆盖。用自定义类结合组件的内置类写样式，能确保你的样式优先级足够高，从而生效。

内容的提问来源于stack exchange，提问作者förschter