vue中修改第三方组件的样式不生效
问题
在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如
<div class="test">
<el-button>按钮</el-button>
</div>
<style lang="less" scoped>
.test{
.el-button span{
background:red;
}
}
</style>
以上对.el-button span
的样式不生效
问题的原因
想要找到解决方案,我们先来看看不生效的原因。
1)首先,scoped是如何实现局部样式的?
查看vu-loader文档,根据文档可以知道,当 <style>
标签有 scoped
属性时,会对组件内的元素加上一个类似于data-v-f3f3eg9
的独特标签,组件内的样式只会对带有这个标签的dom元素生效,因此加上scoped
后,组件内的样式不会影响组件外。
2)那scoped为什么对第三方子组件内的dom元素不生效?
文档中提到
仔细阅读这句话,也就是说采用scoped
后,对组件A内采用的子组件,只会对其根元素加上组件A的独特标签,因此对子组件的根元素改变样式能生效,而对非根元素是不生效的。因此上面的例子如果改为对根元素.el-button修改样式,就会生效
<style lang="less" scoped>
.test{
.el-button{
background:red;
}
}
</style>
可以看下具体的dom元素,如图
上图中data-v-5752faac是当前组件test的独特标签(其他是父元素带上的,这里忽略),可以看到子组件el-button的根元素带上了此标签,而非根元素span没带上,因此对span的修改是不生效的,此时如果手动在span元素上加上data-v-5752faac,会发现样式生效
3)不仅限于第三方组件
从上面的分析来看,其实不仅限于第三方组件,任何采用到的子组件,只要是想修改子组件的非根元素都是不生效的
解决方案
- 【方案一】加上一个非scoped样式
根据文档可知,vue可以混用本地和全局样式,因此对子组件的非根元素样式修改,可以单独放在一个非 scoped 样式中
<style>
.test{
.el-button span{
background:red;
}
}
</style>
<style scoped>
/* 本地样式 */
</style>
- 【方案二】采用/deep/
加上/deep/,组件的样式可以渗透到子组件相应的元素上
<style lang="less" scoped>
.test{
/deep/ .el-button span{
background:red;
}
}
</style>
参考文档
vu-loader文档
vue中修改第三方组件的样式不生效的更多相关文章
- vue中修改第三方组件的样式并不造成污染
vue引用了第三方组件, 需要在组件中局部修改第三方组件的样式, 而又不想去除scoped属性造成组件之间的样式污染. 此时只能通过>>>,穿透scoped. 但是,在sass中存在 ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
- Vue中的scoped及穿透方法(修改第三方组件局部的样式)
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- 如何在vue中修改动态标签中的样式和修改组件库样式
vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )
最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...
随机推荐
- Jfinal初次尝试及Jetty使用相关问题
Jetty介绍 Jetty官网:http://www.eclipse.org/jetty/ 参考:Jetty使用教程(一)--开始使用Jetty 1. 使用 参考上面文档,但是有些更新: echo $ ...
- 轻松搭建CAS 5.x系列(7)-在CAS Server使用第三方帐号做认证
概述说明 CAS除了使用自身数据库配置的帐号体系外,也可以使用第三方帐号来做认证. 比如实现如下类似的红色标注部分的登录效果: CAS自带了Facebook.GitHub.WordPress和CAS的 ...
- (错误) Eclipse使用Maven创建Web时错误
转自:http://blog.csdn.net/afgasdg/article/details/12757433 问题描述: 使用Eclipse自带的Maven插件创建Web项目时报错: Could ...
- (六)springmvc之ModelAndView、Model、Map、ModelMap
<a href="<%=request.getContextPath()%>/responseData/response_1">使用原生的作用域</a ...
- Visual Studio 开发大量 JavaScript 代码项目程序崩溃的解决方案
最近公司做新项目,基于 Bootstrap.AngularJS 和 kendo 开发一套后台的管理系统,在项目中使用了大量的 JavaScript 文件,这两天 Visual Studio 2015 ...
- mac安装composer
推荐阅读:https://www.jianshu.com/p/edde14a67b1a 自己实际操作: 下载 composer https://getcomposer.org/download/ 下载 ...
- Python实现定时执行任务的三种方式简单示例
本文实例讲述了Python实现定时执行任务的三种方式.分享给大家供大家参考,具体如下: 1.定时任务代码 import time,os,sched schedule = sched.scheduler ...
- css:display:grid布局
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
- 如何使用Visual Studio Code调试PHP CLI应用和Web应用
在按照Jerry的公众号文章 什么?在SAP中国研究院里还需要会PHP开发? 进行XDebug在本地的配置之后,如果想使用Visual Studio Code而不是Eclipse来调试PHP应用,步骤 ...
- docker alpine wkhtmltopdf
截止2019.08 wkhtmltopdf 还没有 alpine 的版本 如需使用 需要在 alpine 环境中编译 生成 wkhtmltopdf (使用 apk add wkhtmltopdf ...