如何修改reactstrap Input组件的边框颜色

解决方案 #

你遇到的样式不生效问题有两个核心原因：

• reactstrap Input 默认focus状态除了border-color之外，还自带了box-shadow高亮效果，仅修改border-color无法覆盖默认的视觉表现
• 你代码中配置了invalid属性，当校验不通过时reactstrap会自动给组件添加.is-invalid类，这个类的默认样式优先级高于你自定义的.login-input类，导致样式被覆盖

按照以下方式修改CSS即可生效：

/* 普通状态focus样式 */
.login-input:focus {
  border-color: white !important;
  box-shadow: none !important;
  /* 如果需要保留阴影效果，可替换为自定义配置，例如：box-shadow: 0 0 0 0.2rem rgba(255,255,255,.25) */
}

/* 校验不通过时的默认边框样式 */
.login-input.is-invalid {
  border-color: white !important;
}

/* 校验不通过时的focus样式 */
.login-input.is-invalid:focus {
  border-color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(255,255,255,.25) !important;
}

如果修改后仍未生效，检查你的自定义CSS文件引入顺序，确保在reactstrap的默认CSS之后引入，相同优先级下后引入的样式会覆盖先引入的默认样式。

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