三种⽅式修改vue项⽬中的element组件样式
三种⽅式修改vue项⽬中的element组件样式
项⽬场景
在vue中使⽤element组件的时候，有些样式需要根据需求进⾏调整.这⾥提供三种⽅法修改element组件的原⽣样式来实现.
解决⽅案
vue element admin按需选择，可以全局修改element组件样式或者只修改该⽂件的组件样式.
1.全局修改组件样式
这种⽅法可以修改这个所有组件的样式.
打开vue项⽬，右键检查，到该组件的名字，在样式中输⼊该组件名，进⾏样式修改.
<style>
.el-form-item__label {// 对应的组件的类名
  text-align: center;
}
</style>
2.局部修改组件样式
2.1 scoped实现局部样式穿透
scoped是Vue⾥⾯style标签的⼀个特殊属性，当⼀个style标签拥有scoped属性的时候，就相当于说明它⾥⾯的样式只作⽤于当前这个Vue页⾯，不会污染到全局的样式，我们可以使⽤这个属性只对该页⾯的样式进⾏修改.
第⼀步,⽤⼀个⽗元素把原来的组件包裹起来，通过⽗查⼦到组件的类.
第⼆步，根据需求重写组件的样式.
注意：不能使⽤less
<style scoped >
.userInfo>>>.el-form-item__label{
//格式:.原⽣组件的⽗元素class>>>.element组件名{样式}
text-align: center;
}
2.2 scoped+less局部穿透
第⼀步同上，第⼆步如下:
<style scoped lang="less">
　.userInfo{
  /deep/.el-form-item__label{
  // less语法要通过/deep/ 来到⼦级的类
  　text-align: center;
  }
　}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。