在做登录界面的时候,因为没有进行手写html以及样式,使用了elementui的样式,我页面的需求是要自适应屏幕的,所以就要将所有的元素都要进行宽高写成百分比的形式,
这个时候就需要修改element ui 中元素的样式,
以用户名输入框为例子 首先想到的就是重写input样式,找到页面中元素的class,然后重新写上一个样式,
如下:
.login-form__item{ margin-bottom: 20px; .el-input__inner { height: 60px !important; background-color:red !important; } }
但是写上之后,问题来了怎么都不生效 important 我也加上了
原因:
因为我在页面中样式写了 scoped,vue-load官网中有说明,使用了scoped之后父组件中写的样式将不会渗透到子组件中去
参照官网地址:
https://vue-loader.vuejs.org/zh/guide/scoped-css.html
截图:
解决办法:
第一种:可以混用style 混用本地的和全局样式
你可以在一个组件中同时使用有 scoped 和非 scoped 样式:
<style> /* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style>
这种可以解决问题,但是容易搞混淆,将input的样式写在全局当然就不合适了
第二种:深度作用选择器
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>
操作符:
<style scoped> .a >>> .b { /* ... */ } </style>
编译之后
.a[data-v-f3f3eg9] .b { /* ... */ }
但是有一个问题
有些像 Sass 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
或 ::v-deep
操作符取而代之——两者都是 >>>
的别名,同样可以正常工作。
.login-form__item{ margin-bottom: 20px; /deep/ .el-input__inner { height: 60px; background-color:red; } }
完美解决问题