关于element UI框架使用＞＞＞或者/deep/渗透样式失效问题

最新推荐文章于 2024-08-05 18:19:35 发布
最新推荐文章于 2024-08-05 18:19:35 发布
阅读量1.3k 收藏 7
点赞数 4
分类专栏： 前端常见BUG 文章标签： vue.js css3 前端 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49006730/article/details/128342055
版权

通常我们在使用element UI框架可能会需要调整样式，并且只作用于当前页面，不让其影响其他页面的同一个组件，这时我们会用到scoped属性。并且通过>>>或者/deep/来实现修改底层样式，如下图

 但是部分人可能使用>>>或者/deep/会失效。此时使用::v-deep即可解决，如下图

 温馨提示：必须加上scoped，否则会影响你其他地方的样式

若你的项目不存在scoped，此时不要在你原来的style标签中加scoped，会影响你原来的页面效果

应该在你原来的style标签下再重新写一个style标签，然后再加上scoped，并且把你想要渗透的样式写在里面，如下图

 

Zincik
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
scoped和/deep/深层选择器原理及问题解决:vue+element-ui项目为何用深层选择器可以解决?为什么有的时候/deep/不好用?如何解决?
箜的博客
04-11 1538
style的scoped属性工作原理,深度选择器工作原理,vue+element-ui项目中使用scoped为什么element-ui组件样式不易修改,如何解决?
在vue+element ui框架里实现lodash的debounce防抖
10-16
在本文中，开发者遇到了一个具体问题：使用Element UI的多选远程搜索框时，每次输入都会触发后台请求。为了解决这个问题，开发者决定利用lodash的`debounce`来实现防抖。 首先，开发者通过npm安装了lodash库： ```...
element ui修改组件样式失效，使用/deep/报错，怎么处理？
浮生的博客
11-02 2887
//使用::v-deep即可，例如下方写法 ::v-deep .el-table th{ background-color: #ccc !important; }
【vue elementUI】el-select和弹出框el-option样式调整，::v-deep失效
qq_69775429的博客
07-03 241
修改弹出框样式，需要先修改一个属性 :popper-append-to-body="false"修改样式使用::v-deep。
/deep/使用方式方式；/deep/无效； ::v-deep和＞＞＞使用；
i_am_a_div的博客
12-07 8344
/deep/ >>> ::v-deep
【sass】 中使用 /deep/ 修改 elementUI 组件样式报错
做点有意思的事情
02-10 2123
element plus 想要覆盖组件的样式，想到了。上边的写法不会报错，但是也不会生效。替换 /deep/ ，成功解决了问题。
css关于/deep/和＞＞＞和::v-deep的解释和用法
热门推荐
走在搬砖的路上！
07-06 1万+
/deep/和>>>和::v-deep 我们在style lang="scss"时经常用scoped属性实现组件样式私有化的时候，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，比如: .conBox /deep/ .el-input__inner{ padding:0 10px; } 注意，VUE3.0下/deep/的使用可能会有报错 如果/deep/报错，可采用::v-deep，效果基本一样，有人说
vue的/deep/失效问题
cv1002420186的博客
12-12 872
解决vue的/deep/失效的问题
vue+element,scss加/deep/样式不生效问题
axiaozhizhi的博客
02-02 2678
vue+element,scss加/deep/样式不生效问题 比如：要调整.el-collapse-item__header的样式 /deep/.el-collapse-item__header{ background-color: red; } 不生效。 把/deep/更换成 ::v-deep ::v-deep .el-collapse-item__header{ background-color: red; } 可以随意设置自己想要的样式了^ _^ ...
Vue 使用Scss预处理Css，在使用深度作用选择器修改局部ui默认样式时，/deep/报错不生效
qq_37012136的博客
11-13 1万+
深度作用选择器有>>>和别名/deep/ >>>基本在纯css中使用，类似Sass，less的Css预编译器一般都用/deep/。 出现的问题 最近在写项目的时候（使用eslint-standard代码校验），我用Sass使用/deep/修改局部默认ui样式的时候，发现终端报错，并指明是/deep/这块的错误。报错如下 无奈我只好另起一个style去写纯Css...
vue 使用element ui样式无法覆盖问题记录
dmr123456的博客
10-25 785
1、覆盖el-tab字体样式 使用/deep/样式穿透 <style lang="scss" scoped> /deep/ .el-tabs__item { font-size: 19px; color: rgba(0,0,0,0.85); } 报错： 解决方案： 使用::deep 替换/deep/ <style lang="scss" scoped> ::v-deep .el-tabs__item { font-size: 19px; color:.
基于Vue框架的element-ui离线文档
07-19
Element UI 很可能采用了 MIT 或者 Apache 2.0 等开源许可证，这意味着开发者可以自由地使用和定制这个组件库，但需遵循一定的规定。 `CHANGELOG` 文件记录了项目的更新历史，通常按语言版本分类，如 `CHANGELOG.fr...
Vue Element UI 完整版前端框架
07-31
在实际项目中，你可以利用Vue.js和Element UI构建一个功能完善的后台管理系统或者企业级应用。通过阅读和理解提供的源码，你不仅可以学习到如何使用这两个工具，还能深入学习前端工程化实践，如模块化、状态管理...
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
采用Yii2框架、vue3/vite、Element Plus UI实现前后端分离，移动端使用UNIAPP框架
05-11
ShopWind开源商城免费可商用，采用Yii2框架、vue3/vite、Element Plus UI实现前后端分离，移动端使用UNIAPP框架。系统包含微信小程序端、H5端、公众号商城、PC、APP客户端（Android、iOS），支持分销、拼团、社团...
【Vue3】element-plus中el-tree的递归处理赋值回显问题
最新发布
weixin_62980497的博客
08-05 175
回显 -> 递归处理所有层级菜单选中的id。只要勾选一个子节点，回来接收到的父节点数据。整体思路很简单：初始化树 -> 处理。所以涉及到了权限管理和菜单管理。会显示 ，会显示所有子节点数据。由于项目是从0-1开始构建的。
从0开始搭建vue + flask 旅游景点数据分析系统（ 八）：美化前端可视化图形
roccreed的专栏
08-05 150
前端echarts可视化三个图形的美化
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 345
SignList这三个页面就是需要切换的页面。
JavaScript和vue实现左右两栏，中间拖动按钮可以拖动左右两边的宽度
qq_40269801的博客
08-02 407
JavaScript和vue实现左右两栏，中间拖动按钮可以拖动左右两边的宽度
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值