【Vue】CSS样式覆盖问题？

• Z时代
• 2024-01-10
• 分类：技术分享

代码

  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 样式？

回答

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

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

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

以上是 【Vue】CSS样式覆盖问题？ 的全部内容， 来源链接： utcz.com/a/83789.html