问题背景: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组件样式无效的问题研究的更多相关文章

  1. vue通过修改element-ui相关类的样式修改element-ui组件的样式

    可以在App.vue中的style中修改element-ui的样式. .el-menu{ width:160px !important; } 注意:一定要在属性值后面加上 !important 使自己 ...

  2. html单页面通过cdn引入element-ui组件样式不显示问题

    html单页面通过cdn引入element-ui组件样式不显示问题 必须先引入vue,再通过cdn引入element,否则element-ui组件与样式无效. <!DOCTYPE html> ...

  3. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  4. sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  5. vue+Elment-UI,修改element组件样式

    在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ...

  6. vue scoped 穿透_vue 修改内部组件样式问题

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  7. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  8. vue 项目全局修改element-ui的样式

    引入了element-ui,但是和我们自己的样式颜色有很大的不同, 修改例子:在src文件下创建 element-var.scss,代码如下 $--color-primary: yellow;  /* ...

  9. 修改elementui默认样式

    转发连接:https://blog.csdn.net/weixin_41557291/article/details/80606525 在需要更改的组件里新增一个style标签[重点:不要加scope ...

随机推荐

  1. 用memcached实现的php锁机制

    <?php /** * 使用Memcache实现给进程加锁的类 * * Copyright (C) 2013 JeffJing * * 一些时候需要让系统的某些操作串行化,这个时候就要对这些操作 ...

  2. 【Leetcode】583. Delete Operation for Two Strings

    583. Delete Operation for Two Strings Given two words word1 and word2, find the minimum number of st ...

  3. python 多进程操作

    由于python 多线程是无法在多核上发挥优势的,所以才用多进程的方式来折中将这个问题解决. from multiprocessing import Pool import os def f(x): ...

  4. POJ 1222【异或高斯消元|二进制状态枚举】

    题目链接:[http://poj.org/problem?id=1222] 题意:Light Out,给出一个5 * 6的0,1矩阵,0表示灯熄灭,反之为灯亮.输出一种方案,使得所有的等都被熄灭. 题 ...

  5. 关于dp骗分

    1.样例2.搜索3.大小->贪心:<1>每次选代价最小的两个矩阵                      <2> 每次选最大....                   ...

  6. Android UI设计规范之知识点

    界面尺寸 android的尺寸众多,建议使用分辨率为720×1280的尺寸设计.这个尺寸720×1280中显示完美,在1080×1920中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也 ...

  7. 事务有哪些特性?spring的事务管理有几种方式实现,如何实现?

    特性:1.原子性:一个事务中所有对数据库的操作是一个不可分割的操作序列,要么全做要么全不做 2.一致性:数据不会因为事务的执行而遭到破坏 3.隔离性:一个事物的执行,不受其他事务的干扰,即并发执行的事 ...

  8. noip200706字符串的展开

    试题描述: 在初赛普及组的“阅读程序写结果”的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于“d-h”或者“4-8”的字串,我们就把它当作一种简写,输出时,用连续递增的字母获 ...

  9. java_es

    在查询时过滤掉指定的"_id"的数据 GenericObjectPoolConfig poolConfig = new GenericObjectPoolConfig();// 对 ...

  10. Codeforces Beta Round #6 (Div. 2 Only) D. Lizards and Basements 2 dfs

    D. Lizards and Basements 2 题目连接: http://codeforces.com/contest/6/problem/D Description This is simpl ...