在Vue中使用deep深度选择器修改element UI组件的样式
在项目当中我们常常会使用到 Element UI 组件库来进行快速开发，但是组件在引入之后它都会有官方默认的样式，有些情况我们需要修改它的样式。
方法一（不推荐）：使用class
为要修改的这个组件标签设置一个 class 类名，然后在 <style></style> 标签中设置样式。但要注意这种方式必须是在全局下才会生效，也就是说 <style></style> 标签中不能用 scoped 属性。
<style> </style>
Tip：当 <style> 标签中有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，不会影响其子组件。也就是实现了组件的私有化，不对全局造成样式污染。
需要注意的是，<style>标签如果没有 scopd 属性，可能会造成其他组件样式的错乱，所以该方式不推荐。
方法二：使用 deep 深度选择器
同样为要修改的这个组件标签设置一个 class 类名，并在 <style></style> 标签中设置样式，但是保留 <style> 标签的 scoped 属性；
<style scoped> </style>
深度选择器的写法可以用 /deep/ 或者 >>> ；区别是 >>> 在 less 语法下不可用，/deep/ 则全部适用。
举例：修改 el-input 的样式；
<el-input class="txt" v-model="user" placeholder="请输入用户名">
<i slot="suffix" style="display: flex;align-items: center;">
<img
class="icon"
src="/static/login_new/login_icon_account_hig.png"
alt=""/>
</i>
</el-input>初始样式如下，输入框为直角；
接下来我们通过 CSS 用普通的类选择器来修改它为圆角；
<style scoped>
.txt {
border-radius: 2.64rem !important;
}
</style>样式不会生效；
使用深度选择器，格式如下；
<style scoped>
.txt /deep/ .el-input__inner {
border-radius: 2.64rem !important;
}
</style>样式修改成功；
到此这篇关于在Vue中如何修改element UI组件的样式（deep 深度选择器）的文章就介绍到这了,更多相关Vue修改element UI组件的样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
图片裁剪功能无论是用户头像的裁剪,还是图片内容的精确调整,都成为了提升用户体验的关键一环,本文将详细介绍如何在Vue.js项目中集成并使用Cropper.js实现一个强大的图片裁剪组件,需要的可以参考下2024-11-11
本文为大家介绍Vue中路由的使用方法,包括安装路由创建路由并导出以及在应用实例中使用vue-router的相关知识,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
本篇文章主要介绍了web前端vue之CSS过渡效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue组件中修改组件外元素样式,本文给大家分享两种解决方案帮助大家解决这样的问题，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue+axios+promise实际开发用法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本文主要介绍了Vue中使用Lodash的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue组件之 高德地图地址选择功能的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
从Echarts报错中学习Vue3 ref和shallowRef区别及其组件二次封装demo
这篇文章主要介绍了从Echarts报错中学习Vue3 ref和shallowRef区别及其组件二次封装demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要为大家详细介绍了vue的事件绑定与方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论