CSS样式覆盖问题？

Question

代码

  input {
    &:focus {
      border-top: 0px;
      border-left: 0px;
      border-right: 0px;
      box-shadow: 0;
    }
  }

期望效果

.login-form input:focus {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    -webkit-box-shadow: 0;
    box-shadow: 0;
}

页面实际效果

.login-form input:focus {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    // -webkit-box-shadow: 0;
    // box-shadow: 0;
}
.ivu-input:focus {
    border-color: #57a3f3;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(45,140,240,.2);
}

请问我改怎么写？覆盖原来的 .ivu-input:focus 样式？

Answer 1

1.看看样式设置层级
2.通过id、class覆盖
3.!important 覆盖
4.框架样式引用在前、自己样式放在最后加载避免样式覆盖 原有样式没有覆盖 在浏览器检查标签看样式加载没

Answer 2

页面里在多写一个style，不要写scoped就可以修改iview的样式了，最好在外层嵌套一个div，防止污染的别的地方使用到iview的组件样式。当然你也可以使用 深度选择器>>>去修改（不支持less）

Answer 3

代码里面改： box-shadow：0 !important;