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. vue.js实战——购物车练习(包含全选功能)

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  2. [模板] 数学基础:快速幂/乘/逆元/exGCD/(ex)CRT/(ex)Lucas定理

    方便复制 快速乘/幂 时间复杂度 \(O(\log n)\). ll nmod; //快速乘 ll qmul(ll a,ll b){ ll l=a*(b>>hb)%nmod*(1ll< ...

  3. maven在windows及linux环境下安装

    maven下载 下载地址:https://maven.apache.org/download.cgi maven在windows下安装 解压到D盘 修改配置文件 进入conf,打开settings.x ...

  4. antd的Tree控件实现点击展开功能

    antd 的 Tree 控件没有提供点击展开的功能,只能通过左边的三角形实现展开和收起,没办法只好自己实现这个功能. 先看效果 如图实现的是类似 Mac 文件目录形式的结构,有箭头代表是个文件夹,点击 ...

  5. 计算pi的位数

    from random import random from math import sqrt from time import clock DARTS=1000000 hits=0.0 clock( ...

  6. ES6部分知识点总结

    注:本文通过yck前端面试小册学习整理而得,记录下来供自己查阅 1.var 变量提升 使用var声明的变量,声明会被提升到作用域的顶部 举几个例子: eg1: console.log(a) // un ...

  7. 微信小程序之 3d轮播(swiper来实现)

    以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...

  8. TensorFlow 常用函数与方法

    摘要:本文主要对tf的一些常用概念与方法进行描述. tf函数 TensorFlow 将图形定义转换成分布式执行的操作, 以充分利用可用的计算资源(如 CPU 或 GPU.一般你不需要显式指定使用 CP ...

  9. Slow ReadProcessor&amp;Error Slow BlockReceiver错误日志分析(转)

    1.总结 "Slow ReadProcessor" 和"Slow BlockReceiver"往往是因为集群负载比较高或者某些节点不健康导致的,本文主要是帮助你 ...

  10. day 17 - 1 递归函数

    递归函数 什么是递归 了解什么是递归 : 在函数中调用自身函数 最大递归深度默认是 997/998 —— 是 python 从内存角度出发做得限制 能看懂递归 能知道递归的应用场景 初识递归 —— 二 ...