1)修改组件的样式,但是只作用于当前页面,其他页面不受影响,做法有两种:

法一:使用关键字“/deep/”

1)在当前页面添加样式:

<style lang="scss" scoped>

自定义类名 /deep/{

element ui选择器类名{
样式
}
}
</style>

2)

:在其他页面写样式再导入到所需页面
scss文件写法:

.xx /deep/{

element ui选择器类名{
样式
}
}

.vue页面引入必须加上scoped:
<style lang="scss"  scoped>
@import "../../../styles/demo.scss";
</style>

法二:使用 ">>>" 也可实现相同效果(注意不要scss的预处理样式,否则也是没效果的)
<style  scoped>
.xxx >>> .el-checkbox__label {
color: red;
}

</style>

总之:有scss的地方一定要用deep;不用scss时就要用>>>

element-ui修改全局样式且只作用于当前页面的更多相关文章

  1. element ui 修改默认样式

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

  2. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  3. vue+element ui 表格自定义样式溢出隐藏

    样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...

  4. vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输

    在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...

  5. vue加scoped后无法修改样式(无法修改element UI 样式)

    有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...

  6. vue中修改swiper样式

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

  7. vue 无法覆盖vant的UI组件的样式

    vue 无法覆盖vant的UI组件的样式 有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将 ...

  8. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  9. vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

    在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...

随机推荐

  1. JMeter配置好环境变量后无法启动---翻车笔记

    双击jmeter.bat出现下图情况 手欠了win7中配置 path无意中多删了变量 解决方法:在计算机-属性-高级系统设置-环境变量Path中添加 %SystemRoot%/system32;%Sy ...

  2. Google Closure Compiler高级压缩混淆Javascript代码

    一.背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyj ...

  3. VUE浏览器储存封装

    import {isFunction, extend} from 'lodash' const _originStorage = function () { var pluses = /\+/g fu ...

  4. 离线安装IE 11

    转自:http://blog.sina.com.cn/s/blog_711ab1b10102wzq1.html 1.在D盘下,新建文件夹,取名为“ie”. 2.将官网下载的IE11离线包放到此文件夹中 ...

  5. Converting PDF to Text in C#

    Parsing PDF files in .NET using PDFBox and IKVM.NET (managed code). Download source files - 82 kB [c ...

  6. Java拓展接口-default关键词

    Java接口在使用过程中有两点规定: 1.接口中只能有定义方法名.方法返回类型,不能有方法的实现. 2.实现接口的类,必须实现接口中所有的方法. 例如下面的例子: //定义接口 public inte ...

  7. Web框架的原理和Django初识

    一.Web框架的本质 1.本质 实际上Web应用本质上就是一个socket服务端, 而用户的浏览器就是一个socket客户端. 2.最原始的web框架 socket服务端 import socket ...

  8. EasyTouch5ForSiki学院

    总结: 这里面的一些功能,就可以拿来做移动或者PC的很多功能了,这是一个很有用的插件. 禁用0618错误 EasyTouch4_x的写法: using HedgehogTeam.EasyTouch; ...

  9. vue实战记录(四)- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  10. 项目管理——WBS工作分解法

    首先我们要了解什么是WBS工作分解法 工作分解结构(Work Breakdown Structure,简称WBS)跟因数分解是一个原理,就是把一个项目,按一定的原则分解,项目分解成任务,任务再分解成一 ...