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. 查询数据，从链接地址中爬取文章内容jsoup

    查询数据,从链接地址中爬取文章内容 protected void doGet(HttpServletRequest request, HttpServletResponse response) thr ...

  2. 5-1 嵌套while循环应用

    package com.imooc; public class forDemo { public static void main(String[] args) { ;//外重循环的循环变量: ;// ...

  3. 代理类和AOP

    客户端不用调用目标对象了,直接调用代理类.最终目标方法还是去实行了. 代理类的每个方法调用目标类的相同方法,并且在调用方法时候加上系统功能的代码 代理和目标实现了相同的接口,有相同的方法.通过接口进行 ...

  4. Asp.Net Core 2.2 - HTTP Error 500.0 - ANCM In-Process Handler Load Failure

    检查发布文件下是否存在runtime这个文件夹,如图

  5. Qt编写气体安全管理系统22-报警联动

    一.前言 报警联动功能不是一个常规的功能,一般是给客户定制的功能,比如探测器采集到的数据报警了,不仅本地要播放报警声音,存储报警记录,发送报警短信和邮件,还需要触发警号面板灯进行报警,而警号面板指示灯 ...

  6. Spring MVC 数据模型与视图

      从控制器获取数据后,会装载数据到数据模型和视图中,然后将视图名称转发到视图解析器中,通过解析器解析后得到最终视图,最后将数据模型渲染到视图中,展示最终的结果给用户. 用ModelAndView来定 ...

  7. 基于EasyDSS流媒体解决方案创建视频点播、短视频、视频资源库等视频播放系统

    随着前端技术的不断发展,视频点播早已不再是IE6时代的浏览器嵌入式Windows Media Player.也不是后来的flash media player需要的rtmp点播流,现在能够唯一满足全终端 ...

  8. JS中search查找某些内容，正则表达式|查找分隔的任何项

    JS中可以用indexOf来查找某个字符串里的某些内容的索引,也就是在字符串的位置.如果存在该字符串,会返回该字符串的索引,如果不存在会返回-1,可以通过某些内容的索引是否为-1判断是否存在该字符串. ...

  9. [Google] 9717 取数对弈

    我写的Python代码: class Solution(object): def getNumberGame(self, n, nums): m = len(nums) dp = [[0] * m f ...

  10. 01点睛Spring MVC 4.1-搭建环境

    转发:https://www.iteye.com/blog/wiselyman-2213906 1.1 简单示例 通篇使用java config @Controller声明bean是一个控制器 @Re ...