在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组件的样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue3+ElementPlus 表单组件的封装实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue如何解决el-select下拉框显示ID不显示label问题
这篇文章主要介绍了vue如何解决el-select下拉框显示ID不显示label问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最近在使用vue开发的h5移动端想要实现一个调用摄像头扫描二维码的功能,所以下面这篇文章主要给大家介绍了关于Vue移动端实现调用相机扫描二维码或条形码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了解决VUE的对话框el-dialog点击外部消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了Vue el-table 默认展开某一行的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了浅谈Vue.set实际上是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了vue中@click如何绑定多个事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
vscode使用Eslint+Prettier格式化代码的详细操作
这篇文章主要介绍了vscode使用Eslint+Prettier格式化代码，本文通过图文示例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
防抖就是对于频繁触发的事件添加一个延时同时设定一个最小触发间隔,防抖大家都学过,但是如何在 Vue3 里中将防抖做到极致呢,下面小编就来和大家详细讲讲2023-10-10
今天小编就为大家分享一篇浅谈vuex中store的命名空间，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论