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. Android——具有边框的Textview

    我们可以看见很多类似瀑布流的分类: 通过边框进行选择,那么这个边框是怎么变成的呢? 我们可以通过添加背景图,不过有更加简单的,如下: 我们在drawable文件中编写一个shape, <?xml ...

  2. 在一台计算机上运行两个或多个tomcat

    有的时候我们需要在一台计算计算机上安装多个Tomcat,那我们该怎样配置呢?  ## 1.配置思路: 在操作之前我们先启动一个Tomcat,看一下启动数据: 这里面有我们在环境变量中配置的CATALI ...

  3. spring cloud实战与思考(二) 微服务之间通过fiegn上传一组文件(上)

    需求场景: 微服务之间调用接口一次性上传多个文件. 上传文件的同时附带其他参数. 多个文件能有效的区分开,以便进行不同处理. Spring cloud的微服务之间接口调用使用Feign.原装的Feig ...

  4. LODOP提示、报错、现象,简短问答

    提示升级提示:“打印控件需要升级!点击这里执行升级,升级后请重新进入."“Web打印服务CLodop需升级!点击这里执行升级,升级后请刷新页面.”(新版提示) 参考http://www.c- ...

  5. Raspberry pi connect temperature and humidity to onenet (移动云平台)

    工具 树莓派3 modelB 一个 dht11温湿度传感器一个  onenet平台 安装好requests库的python(一定要安装好不然代码不能正确运行,可以参考我的另一篇博文点击打开链接) 树莓 ...

  6. luogu1117 优秀的拆分 (后缀数组)

    考虑分别计算每个位置作为AA的末尾或者BB的开头的个数 最后乘一乘就是答案 据说是套路的计算AA的方法: 首先枚举A的长度L,然后每L个字符当做一个关键点,这样的话,一个AA包含且只包含相邻两个关键点 ...

  7. LOJ #6285 分块入门9

    题意:区间众数,不带修改,带修改刚看了一眼没看懂cls在讲啥QAQ. 题解:按照代码中那个sqrt(n/2/log2(n))大小分块,可以用均值不等式证明的,就是假设查询和n同级,然后一通爆算就可以得 ...

  8. input输入框自动获取焦点

    只要在该input标签后添加autofocus="autofocus"即可 代码实例: <html> <head></head> <bod ...

  9. 常用js方法整理(个人)

    开头总要有点废话 今天想了下,还是分享下自己平时积累的一些实用性较高的js方法,供大家指点和评价.本想分篇介绍,发现有点画蛇添足.整理了下也没多少拿得出手的方法,自然有一些是网上看到的个人觉得很有实用 ...

  10. WebSocke实时通讯协议

    WebSocket 是什么? WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 ...