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. ISO/IEC 9899:2011 条款6.5.5——乘法操作符

    6.5.5 乘法操作符 语法 1.multiplicative-expression: cast-expression multiplicative-expression    *    cast-e ...

  2. Linux的桌面虚拟化技术KVM（二）——远程桌面管理

    Linux的桌面虚拟化技术KVM(一)——新建KVM虚拟机 远程桌面管理,指的是远程图形界面管理,所以要保证物理机要有图形化界面. (1).VNC管理 安装VNC-server服务,并进行配置 [ro ...

  3. Swift4.0复习类型定义、类型投射等操作

    1.类型定义: /// 这里将MyInt定义为Int32类型 typealias MyInt = Int32   /// 这里将MyArrayInt定义为[MyInt]数组类型 typealias M ...

  4. TortoiseSVN安装和使用（转）

    http://blog.csdn.net/Zhihua_W/article/details/64904692?locationNum=2&fps=1 https://www.cnblogs.c ...

  5. SQL网页端在线自定义查询工具

    TreeSoft数据库管理系统,是用JAVA开发,基于网页的数据库SQL查询工具.功能包括:数据库的展示,库表的展示,表字段结构的展示,SQL语句的在 线编辑批量执行,表结构的在线设计维护,数据的在线 ...

  6. MySQL语句增加字段,修改字段名,修改类型,修改默认值

    原文地址:https://blog.csdn.net/kimgoo/article/details/54630257 增加字段:alter table 表名 ADD 字段 类型 约束 [默认值 注释] ...

  7. Django orm练习

    ORM练习题 models生成 from django.db import models # Create your models here. # 书籍管理 class Book(models.Mod ...

  8. Node.js安装windows环境

    一.安装环境 1.本机系统:Windows 10 Pro(64位)2.Node.js:v6.9.2LTS(64位) 二.安装Node.js步骤 1.下载对应你系统的Node.js版本:https:// ...

  9. Python 发送微信小程序的模板消息

    在小程序的开发过程中,会存在模板消息的发送,具体文档见 这里,模板消息的发送是和语言无关的,这里将简要写一下怎么用 Python 给用户发送模板消息.     通过文档可以知道,发送的时候,需要使用小 ...

  10. Android持久化存储——（包含操作SQLite数据库）

    <第一行代码>读书手札 你可能会遇到的问题:解决File Explorer 中无显示问题 Android中,持久化存储,常见的一共有三种方法实现 (一.)利用文件存储 文件存储是Andro ...