Element是一个很好用的组件库，但是有时候我们需要修改一些组件的样式以满足我们自己的需求。

我们用浏览器调试找到相应的class，在本地重写这个class时，发现修改不成功。

这是因为在Vue文件中的style标签上有一个特殊的属性：scoped。当一个style有这个标签，它的样式就只能作用于当前的Vue组件，可以使组件的样式不相互污染。

解决方案：

1. 去掉scoped，但此方法可能会造成全局污染

2. 将修改的样式放在控制全局样式css文件中

3. 写一个新的style标签（注意不要scoped），在新的标签里去修改样式

关于Vue-ElementUI修改默认样式不成功问题解决的更多相关文章

  1. Vue使用Elementui修改默认最快方法！

    相信大家都需要过,在Vue中使用Elementui的时候,遇到最多也最蛋疼的问题就是修改默认样式,接下来直奔主题: // template <el-progress :text-inside=& ...

  2. Vue——解决使用第三方组件库时无法修改默认样式的问题（使用 /deep/ ）

    最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...

  3. ThinkPHP5如何修改默认跳转成功和失败页面

    ThinkPHP5如何修改默认跳转成功和失败页面 一.总结 一句话总结:直接修改默认跳转页面对应的模板文件的路径:'dispatch_success_tmpl' => APP_PATH . 'i ...

  4. Vue+element-ui 重置组件样式的写法

    两种方式实现element-ui组件的样式 方案1:重置的公共组件样式的写法如下 然后在main.js中引入 import '@/assets/css/element.css'   方案2:每个.vu ...

  5. element ui 修改默认样式

    修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...

  6. vue中修改swiper样式

    问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...

  7. Vue Element-ui自定义dialog样式

    第一步:定义 自定义dialog class名 第二步:全局修改自定义样式 自定义dialogStyle有三个儿子,这样只用找到他们就可以自定更改啦 .custonStyle { xxxxx } .c ...

  8. echarts legend 限制规定显示个数，显示省略号，修改默认样式

    类似百度统计,有的时候legend的个数比较多,但是前端需要控制初始化显示的个数,以及最多显示的条数,先看效果图: 先给代码: <!DOCTYPE html> <html lang= ...

  9. element-ui修改全局样式且只作用于当前页面

    1)修改组件的样式,但是只作用于当前页面,其他页面不受影响,做法有两种: 法一:使用关键字“/deep/” 1)在当前页面添加样式: <style lang="scss" s ...

随机推荐

  1. Ajax serialize()提交form表单不能上传file类型

    前台form表单的提交方式有很多种,例如: 1. form表单submit直接提交的方法 2. Ajax提交的方法 3. jquery提交的方法 4. 原生js提交的方法 每一种方法都有它的优势和不足 ...

  2. 【转载】 【Tensorflow】卷积神经网络中strides的参数

    原文地址: https://blog.csdn.net/TwT520Ly/article/details/79540251 http://blog.csdn.net/TwT520Ly -------- ...

  3. pytorch nn.Sequential()动态添加方法

    之前我们使用nn.Sequential()都是直接写死的,就如下所示: # Example of using Sequential model = nn.Sequential( nn.Conv2d(, ...

  4. [转]Winform打包工具SetupFactory 9 的使用

    写了个WinForm的小程序..以前没打过包..只是直接把Bin里的东西复制出来使用..自己使用是足够.但是发给别人毕竟不太好看(不牛逼)..所以就想着打包.. Vs2012自带的有打包的功能..相信 ...

  5. java获取全部子类或接口的全部实现

    在JAVA中,获取一个类的全部父类是比较简单的,只需要通过反射(Class的getSuperclass()方法)即可.然而,如果想获得一个类的所有子类,或者获得实现某一个接口的所有实现类,相对比较麻烦 ...

  6. 算法习题---5.2木块问题（UVa101）

    一:题目 输入n,得到编号为0~n-1的木块,分别摆放在顺序排列编号为0~n-1的位置.现对这些木块进行操作,操作分为四种. .move a onto b:把木块a.b上的木块放回各自的原位,再把a放 ...

  7. 论H5嵌入APP的联合登录的解决方案

    什么是联合登录 因为公司产品的发展,会与第三方的一些商户进行对接,商户APP提供入口,进入我们的H5页,从而提供服务. 而商户希望用户在其APP进行账户登录后,进入H5页不再进行登录,所以我们的H5需 ...

  8. 转 mysql awr 报告

    1. https://github.com/noodba/myawr 2. https://www.cnblogs.com/zhjh256/p/5779533.html

  9. nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

    ## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express   项目名   --view=ejs 或express   -e    项目名 ## ...

  10. [概率DP][消元法][CF24D]损坏的机器人

    Description 有一只坏了的机器人站在一个\(n\times m\)的网格里,初始位置在\((x,y)\).现在每个单位时间内它会随机选左右下三个方向走,如果它随机的方向会走出网格就不会往这个 ...