修改elementUI组件样式无效的问题研究
问题背景:el-tabs的选项卡默认字体是14px,大了,想改成12px,结果在style里面加样式总是不生效。
解决:样式放到app.vue里面,样式就生效了
.panel-content .el-tabs__item.is-top{
font-size 12px
}
原理分析:在vue组件中我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像”data-v-1233”这样唯一属性的标识,当然也会给当前style的所有样式添加[data-v-1233]这样的话,就可以使得当前样式只作用于当前组件的节点。
但是我们需要注意的是,如果我们添加了子组件,同样的,如果子组件也用scoped标识了,那么在父组件中是不能设置子组件中的节点的。
若父组件有scoped,子组件没有设置,同样,也是不能在父组件中设置子组件的节点的样式的,因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了,不会作用于其他的组件样式。
我在用vue-quill-editor富文本编辑器的时候就遇到了这个坑,我只是想让内容区设置一个高度,这样的话,是必须在App.vue中设置的,我们App.vue相当于根容器,没有设置scoped,所以是可以设置的。
在style里添加scoped,用这种方式相当于在页面上加入了唯一标示。

修改elementUI组件样式无效的问题研究的更多相关文章
- vue通过修改element-ui相关类的样式修改element-ui组件的样式
可以在App.vue中的style中修改element-ui的样式. .el-menu{ width:160px !important; } 注意:一定要在属性值后面加上 !important 使自己 ...
- html单页面通过cdn引入element-ui组件样式不显示问题
html单页面通过cdn引入element-ui组件样式不显示问题 必须先引入vue,再通过cdn引入element,否则element-ui组件与样式无效. <!DOCTYPE html> ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包 在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...
- vue+Elment-UI,修改element组件样式
在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ...
- vue scoped 穿透_vue 修改内部组件样式问题
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
- vue 项目全局修改element-ui的样式
引入了element-ui,但是和我们自己的样式颜色有很大的不同, 修改例子:在src文件下创建 element-var.scss,代码如下 $--color-primary: yellow; /* ...
- 修改elementui默认样式
转发连接:https://blog.csdn.net/weixin_41557291/article/details/80606525 在需要更改的组件里新增一个style标签[重点:不要加scope ...
随机推荐
- Asp.net gzip压缩的启用
gzip压缩使用一种压缩算法,对网页内容进行压缩,从而减小了网页体积.使用gizp压缩后减小了服务器的带宽.提高了网页的打开速度.下边看看我找到的一个asp.net中启用gzip压缩方案. 首先,我们 ...
- jquery控制元素的显示与隐藏
比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...
- 基于原生JS的jsonp方法的实现
基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...
- 【转载】ARouter-万能路由协议
Github源码地址:https://github.com/alibaba/ARouter 一.功能介绍 支持直接解析标准URL进行跳转,并自动解析参数注入 支持多模块工程使用 支持添加多个拦截器,自 ...
- HDU 5876 Sparse Graph(补图上BFS)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5876 题意: 有一个 n 个点无向图,再给你 m 对顶点, 代表着这 m 对顶点之间没有边, 除此之外 ...
- Docker应用系列(四)| 部署java应用
本示例基于Centos 7,假设目前使用的账号为release,拥有sudo权限. 由于Docker官方镜像下载较慢,可以开启阿里云的Docker镜像下载加速器,可参考此文进行配置. 主机上服务安装步 ...
- canconfig 移植记录
can 在Linux 里面是作为一个网络设备存在的,记录一下 canconfig 移植过程. 一. 下载 canutils 和 libsocketcan libsocketcan 地址: http:/ ...
- 【BZOJ 1018】线段树 **
1018: [SHOI2008]堵塞的交通traffic Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 3242 Solved: 1084[Submi ...
- 「COCI2016/2017 Contest #2」Bruza
「COCI2016/2017 Contest #2」Bruza 解题思路 : 首先对于任意时刻 \(i\) ,硬币一定移动到了深度为 \(i\) 的节点,所以第 \(i\) 时刻 Danel 一定染掉 ...
- [BZOJ2429][HAOI2006]聪明的猴子(最小生成树)
性质:最小生成树上任意两点间的最大边权,一定是这两点间所有路径的最大边权中最小的.证明显然. #include<cstdio> #include<cstring> #inclu ...