修改elementui组件样式


首先,要想修改elementui组件样式,我们需要了解scoped工作的原理:

style标签的scoped会在vue-loader里进行处理

所谓的局部css 就是在你当前组件里的所有html标签打一个data-tag

然后会把你scoped里的css编译为 xxx[ data-v-4d856c52],这也就是scoped的作用

 

那么,知道了scoped的作用,修改elementui的样式也就很简单了:

1.全局修改

在全局样式app.css中直接修改全局样式

在组件中style不定义局部样式,也就是不给style标签scoped属性

2.深度修改局部样式

您希望scoped样式中的选择器“深入”,即影响子组件,则可以使用>>>组合

注:某些预处理器(如Sass)可能无法>>>正确解析在这些情况下,您可以使用组合/deep/::v-deep组合 - 两者都是别名,>>>并且工作完全相同。

.search-option >>> .el-input__inner {
  height: 32px;
  border-radius: 0;
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM