Angular响应式表单验证下修改输入元素CSS无效，求助排查

看起来你遇到的是CSS优先级冲突的问题——虽然ng-valid/ng-invalid类已经正确应用到输入框上，但你的样式被UIkit的.uk-input类样式给覆盖了。

为什么会这样？ #

.uk-input类的选择器优先级和你写的.ng-valid[required]是相同的，但如果UIkit的CSS文件在你的自定义CSS之后加载，或者.uk-input里的边框样式定义更具体，它就会覆盖你设置的边框样式。你可以打开浏览器开发者工具（F12），选中输入框元素查看Styles面板，就能看到你的边框样式被划掉，旁边会显示覆盖它的样式来源。

解决方案 #

最简单的办法是提高自定义样式的选择器优先级，把.uk-input类和Angular的表单状态类结合起来：

/* 针对必填项的有效状态 */
.uk-input.ng-valid[required] {
  border: 5px solid #42A948;
}

/* 针对必填项的无效状态 */
.uk-input.ng-invalid[required] {
  border: 5px solid red;
}

这样你的选择器优先级就比单独的.uk-input更高，样式就能正常生效了。

如果你是在组件的CSS文件里写的样式，且没有修改默认的ViewEncapsulation.Emulated视图封装模式，可以加上:host前缀确保样式能作用到组件内的元素：

:host .uk-input.ng-valid[required] {
  border: 5px solid #42A948;
}

:host .uk-input.ng-invalid[required] {
  border: 5px solid red;
}

额外提示 #

尽量避免使用!important强制生效，因为它会破坏CSS的优先级规则，给后续样式维护带来麻烦。优先通过提升选择器优先级的方式解决问题。

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