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. [官网]Using PuTTY

    Previous | Contents | Next Chapter 3: Using PuTTY Section 3.1: During your session Section 3.1.1: Co ...

  2. c选择排序算法

    void selectsort(int *a,int len) { int i,j; int temp; for(i=0;i<len-1;i++) { for(j=i+1;j<len;j+ ...

  3. eclipse(STS)安装jd-eclipse插件实现查看API源代码功能

    emmm,IDEA确实是比STS智能很多,不过适当的转化也是需要的,这里介绍一下eclipse(STS)实现查看class反编译的源文件的功能 去Java Decompiler官网下一下eclipse ...

  4. 洛谷 P1088 火星人

    https://www.luogu.org/problemnew/show/P1088 这个题一开始是很蒙的 感觉很麻烦,每次都要交换balabala..... 后来才知道有这么一个神奇的stl 真是 ...

  5. UVA 10118 Free Candies

    https://vjudge.net/problem/UVA-10118 题目 桌上有4堆糖果,每堆有$N$($N\leqslant 40$)颗.有个熊孩子拿了个可以装5颗糖的篮子,开始玩无聊的装糖游 ...

  6. Kali Linux 发布 2019.1 版

    Kali Linux 是一个基于 Debian 的发行版,关注于高级渗透测试和安全审计并搭载各种常用工具,由 Offensive Security 维护.后者是一个提供信息安全训练的公司. 该项目于日 ...

  7. Java8学习笔记(一)--Lambda表达式

    两个概念 函数式接口 函数式接口就是只显式声明一个抽象方法的接口.为保证方法数量不多不少,java8提供了一个专用注解@FunctionalInterface,这样,当接口中声明的抽象方法多于或少于一 ...

  8. MongoDB 3.6.9 集群搭建 - 切片+副本集

    1. 环境准备 在Mongo的官网下载Linux版本安装包,然后解压到对应的目录下:由于资源有限,我们采用Replica Sets + Sharding方式来配置高可用.结构图如下所示: 这里我说明下 ...

  9. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  10. CSS BFC(格式化上下文)深入理解

    什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是 ...